Sepehr Kazemi Sepehr Kazemi - 6 months ago 20
CSS Question

DIV flow and border issue

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

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.

Comments