DIV flow and border issue

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>

@Starscream1984 border isn't drawn around other div's inside. It's just a line. — , May 20 '16 at 10:41

score 0 · Answer 1 · answered May 20 '16 at 10:41

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>

score 0 · Answer 2 · answered May 20 '16 at 10:42

0

You have to clear floats.

Add following css

#contents:after {
  content: '';
  display: table;
  clear:both;
}

answered May 20 '16 at 10:42

Paran0a

3,359
3
23
48

thepio · Accepted Answer · 2016-05-20T10:49:58.877

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.

I am adding arabic contents it written right to left. so the flow is right — , May 20 '16 at 10:54
Yes I'm not talking about your float being right or wrong. You just need to float the parent or something else for it to be able to have height which leads to the borders to be correct :) — thepio, May 20 '16 at 10:58

score 0 · Answer 4 · answered May 20 '16 at 10:42

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>

score 0 · Answer 5 · answered May 20 '16 at 10:43

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

score 0 · Answer 6 · edited May 23 '17 at 12:24

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?

DIV flow and border issue

6 Answers6