DIV flow and border issue - html

Question

What's wrong with the code. The border is faulty.
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
</div>

Answer 1

You are using floats in the inner divs so the parent has no height. Just set float: left; to the contents div and you see your problem.
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; float: left; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
</div>
You should probably not use inline-css but rather have a external css-file and use clearfix to clear floats on the contents div instead.

Answer 2

You using float elements so add clear: both before main div end
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
<div style="clear: both"></div>
</div>

Answer 3

You have to clear floats.
Add following css
#contents:after {
content: '';
display: table;
clear:both;
}

Answer 4

You can apply #contents { float: left} or use clear float trick for parent to take inner element height:
#contents {
width: 50%;
height: auto;
margin: 0 auto;
left: 50%;
border: 2px solid #73AD21;
}
#contents:after {
content: '';
display: block;
clear: both;
}
#contents > div {
margin: 5px;
}
#contents p {
width: 50%;
text-align: left;
padding-left: 1%;
float: right;
font-size: large;
}
#contents input {
width: 45%;
float: left
}
<div id="contents">
<div id="USER">
<p>user :</p>
<input id="txt_ID" type="text" />
</div>
<div id="PASS">
<p>pass :</p>
<input id="txt_Password" type="text" />
</div>
</div>

Answer 5

It's because you're using float - this takes the element out of the normal flow, because everything is floated, the outer div has no height.
Use display: inline-block instead:
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; display: inline-block;"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; display: inline-block;"/>
</div>
</div>
link to fiddle

Answer 6

Your parent container is being collapsed by its floated children. I recommend using a clearfix class:
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<div class="cf" id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
</div>
Clearfix source: http://nicolasgallagher.com/micro-clearfix-hack/
Info on clearfix: What is a clearfix?