CSS border is not wrapping whole div content

Question

This is my html code which has "box" as main div and then three divs inside it which are positioned left,middle and right respectively.

<div id="box">
 <div class="left">Left</div>     
 <div class="middle">Middle</div>
 <div class="right">Right</div>
</div>

And this is my css code

#box {
    width:90%;
    height:auto;
    border:5px solid green;
}
.left {
    float:left;
    width:30%;
}
.right {
    float:right;
    width:30%;
}
.middle {
    float:left;
    width:30%;
}

This is jsfiddle link: http://jsfiddle.net/hep9oLzn/ The border is not wrapping the content.

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

This happens because of the floated children elements.

All about floats - CSS-Tricks

You need a clearfix.

What is clearfix?

As an example here's a micro clearfix. Micro Clearfix Hack.

#box {
    width:90%;
    height:auto;
    border:5px solid green;
    box-sizing: border-box;
}
.left {
    float:left;
    width:30%;
}
.right {
    float:right;
    width:30%;
}
.middle {
    float:left;
    width:30%;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

<div id="box" class="cf">
    <div class="left">Left</div>     
    <div class="middle">Middle</div>
    <div class="right">Right</div>
</div>

edited May 23 '17 at 12:00

Community

1
1

answered Sep 18 '15 at 07:13

Joel Almeida

7,939
5
25
51

Thanks for your answer. And assigning overflow:hidden; property to main div is also working ,how this works ? can you please explain which one is better, using clearfix or assigning this property ? – Brainy Prb Sep 18 '15 at 07:51
@BrainyPrb depends on your specific case. http://stackoverflow.com/questions/5565668/is-clearfix-deprecated – Joel Almeida Sep 18 '15 at 08:00

score 2 · Answer 2 · answered Sep 18 '15 at 07:27

2

just add float:left to #box,

#box {
    width:90%;
    height:auto;
    border:5px solid green;
    float:left;
}

answered Sep 18 '15 at 07:27

Ajeeb Kalathingalthodi

168
8

score 1 · Answer 3 · answered Sep 18 '15 at 07:15

1

You can just add position: absolute; to #box.

Fiddle

 #box {
    width:90%;
    height:auto;
    position:absolute;
    border:5px solid green;
}

answered Sep 18 '15 at 07:15

Steevan

826
5
8

score 0 · Answer 4 · answered Sep 18 '15 at 07:29

0

You can add display: table; to #box

#box {
    width:90%;
    height:auto;
    border:5px solid green;
    display: table;
}

http://jsfiddle.net/bw0vhske/1/

Some info about display table: http://colintoh.com/blog/display-table-anti-hero

answered Sep 18 '15 at 07:29

Casper Skovgaard

426
4
13

score 0 · Answer 5 · answered Sep 18 '15 at 07:29

Demo

HTML Code

<div id="box">
    <div class="left">Left</div>     
    <div class="middle">Middle</div>
    <div class="right">Right</div>
    <div class="clear"></div> 
</div>

CSS Code

#box {
    width:90%;
    height:auto;
    border:5px solid green;
}
.left {
    float:left;
    width:30%;
}
.right {
    float:right;
    width:30%;
}
.middle {
    float:left;
    width:30%;
}
.clear{
    clear:both;
}
}

score 0 · Answer 6 · answered Sep 18 '15 at 07:53

Your div#box contains only floated elements, which are removed from the normal float. As a result, your div#box has not height. There are many ways you can use to solve your problem.

One is to set an explicit height to your div. For example:

#box {
    width:90%;
    height:600px;
    border:5px solid green;
    box-sizing: border-box;
}

You can use the "clearfix" solution that bootstrap an other ui frameworks use. For example, add this to use css:

#box::after {
  display: table;
  clear: both;
}

You can remove the float attribute from your inside divs and make them inline-block. For example:

#box > div {
  display: inline-block;
  width: 30%;
}

You can place a hidden object after your floated elements and use clear: both on it, like:

<div id="box" class="cf">
    <div class="left">Left</div>     
    <div class="middle">Middle</div>
    <div class="right">Right</div>
    <div class="fix"></div>
</div>

.fix {
      clear: both;
      visibility: hidden;
   }

score 0 · Answer 7 · answered May 26 '19 at 19:10

FYI: The clearfix solution also works with the outline CSS property (which are similar to borders in that they wrap around a div / element)

.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both; }

CSS border is not wrapping whole div content

7 Answers7