Dear Friends!
When I style a form, I usually clear float by <br />
Xhtml:
<form action="WebStandard.html" method="post">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" /><br />
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" /><br />
<input id="ckbRemember" name="ckbRemeber" type="checkbox" />
<label for="ckbRemember" id="rememberLabel">Remember my Account</label><br />
<input type="submit" name="Submit" value="Submit"
class="ButtonSubmit" />
</form>
CSS:
label,
input {
display: block;
float: left;
margin-bottom: 10px;
}
input {
width: 175px;
}
label {
text-align: right;
width: 150px;
padding-right: 5px;
}
#ckbRemember {
display: inline;
margin-left: 155px;
width: 20px;
}
#rememberLabel {
width: 250px;
text-align: left;
}
br {
clear: left;
}
.ButtonSubmit {
width: 75px;
margin-left: 155px;
display: inline;
}
So I think, I can clear float by 3 ways:
<div class="Clear" />
<div class="Clear"></div>
<br class="Clear" />
Trouble: But follow code, only this "<div class="Clear"></div>" take the right effect.
Ambiguous: How can I explaint this?
Tried:
Render in Standard Mode
Pass CSS validation
Pass Xhtml Validation
Xhtml 1.0
<body>
<form action="this" method="post">
<div>
<fieldset id="spaceCulture">
<legend>Space Cultures</legend>
<div id="cultureList">
<div id="avaibleCultures">
<p>Some Content</p>
</div>
<div id="chooseButton">
<p>Some Content</p>
</div>
<div id="selectCultures">
<p>Some Content</p>
</div>
<!-- <div class="Clear" /> -->
<div class="Clear"></div>
<!--<br class="Clear" /> -->
</div>
<label id="labDefaltCulture" for="defaultCulture" >Default content culture <span class="RequireField">*</span>: </label>
<select id="defaultCulture" name="defaultCulture">
<option value="0">---Select Language---</option>
</select>
</fieldset>
</div>
</form>
</body>
CSS:
body , p{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
.Clear {
clear: both;
}
legend {
margin-left: 10px;
}
fieldset {
margin-bottom: 10px;
padding: 0px 0px 5px 0px;
}
div#cultureList {
padding: 0.5em 0em 0.5em 16em;
background-color: rgb(250,200,100);
}
div#selectCultures,
div#avaibleCultures {
background-color: rgb(250,250,100);
}
div#chooseButton {
background-color: rgb(250,150,100);
padding-top: 4em;
width: 8em;
}
div#avaibleCultures,
div#chooseButton,
div#selectCultures{
float: left;
}
label#labDefaltCulture {
width: 17em;
text-align: right;
padding-right: 0.5em;
background-color: rgb(250,250,1);
}
label#labDefaltCulture,
select#defaultCulture {
display: block;
float: left;
margin-bottom: 5px;
}
I know, it is hard for you to explaint. But if you can, please help me.
<!-- m --><a class="postlink" href="Thankshttp://www.quirksmode.org/css/clearing.htmlIt">Thankshttp://www.quirksmode.org/css/clearing.htmlIt</a><!-- m --> is nice. Thanks you.
When I style a form, I usually clear float by <br />
Xhtml:
<form action="WebStandard.html" method="post">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" /><br />
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" /><br />
<input id="ckbRemember" name="ckbRemeber" type="checkbox" />
<label for="ckbRemember" id="rememberLabel">Remember my Account</label><br />
<input type="submit" name="Submit" value="Submit"
class="ButtonSubmit" />
</form>
CSS:
label,
input {
display: block;
float: left;
margin-bottom: 10px;
}
input {
width: 175px;
}
label {
text-align: right;
width: 150px;
padding-right: 5px;
}
#ckbRemember {
display: inline;
margin-left: 155px;
width: 20px;
}
#rememberLabel {
width: 250px;
text-align: left;
}
br {
clear: left;
}
.ButtonSubmit {
width: 75px;
margin-left: 155px;
display: inline;
}
So I think, I can clear float by 3 ways:
<div class="Clear" />
<div class="Clear"></div>
<br class="Clear" />
Trouble: But follow code, only this "<div class="Clear"></div>" take the right effect.
Ambiguous: How can I explaint this?
Tried:
Render in Standard Mode
Pass CSS validation
Pass Xhtml Validation
Xhtml 1.0
<body>
<form action="this" method="post">
<div>
<fieldset id="spaceCulture">
<legend>Space Cultures</legend>
<div id="cultureList">
<div id="avaibleCultures">
<p>Some Content</p>
</div>
<div id="chooseButton">
<p>Some Content</p>
</div>
<div id="selectCultures">
<p>Some Content</p>
</div>
<!-- <div class="Clear" /> -->
<div class="Clear"></div>
<!--<br class="Clear" /> -->
</div>
<label id="labDefaltCulture" for="defaultCulture" >Default content culture <span class="RequireField">*</span>: </label>
<select id="defaultCulture" name="defaultCulture">
<option value="0">---Select Language---</option>
</select>
</fieldset>
</div>
</form>
</body>
CSS:
body , p{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
.Clear {
clear: both;
}
legend {
margin-left: 10px;
}
fieldset {
margin-bottom: 10px;
padding: 0px 0px 5px 0px;
}
div#cultureList {
padding: 0.5em 0em 0.5em 16em;
background-color: rgb(250,200,100);
}
div#selectCultures,
div#avaibleCultures {
background-color: rgb(250,250,100);
}
div#chooseButton {
background-color: rgb(250,150,100);
padding-top: 4em;
width: 8em;
}
div#avaibleCultures,
div#chooseButton,
div#selectCultures{
float: left;
}
label#labDefaltCulture {
width: 17em;
text-align: right;
padding-right: 0.5em;
background-color: rgb(250,250,1);
}
label#labDefaltCulture,
select#defaultCulture {
display: block;
float: left;
margin-bottom: 5px;
}
I know, it is hard for you to explaint. But if you can, please help me.
<!-- m --><a class="postlink" href="Thankshttp://www.quirksmode.org/css/clearing.htmlIt">Thankshttp://www.quirksmode.org/css/clearing.htmlIt</a><!-- m --> is nice. Thanks you.