border in css not fitting according to div

Question

I want to add simply a red border across the #cont but whenever i float these three boxes the border does not work and it only comes on top not wrapping all the div.however i can use overflow:auto. it works but i just wanted to know why it does not work with out overflow.

HTML:

<div id ="cont">
    <div class ="box" > box1 </div>
    <div class ="box" > box2 </div>
    <div class ="box" > box3 </div>
</div>
<div id="foo">footer</div>

CSS:

#cont {
  width:950px;
  border:1px solid red;
}
.box {
  width:300px;
  height:100px;
  border:1px solid black;
  background-color:orange;
  float:left;       
}
#foo {
  width:100px;
  background-color:blue;
  clear:both;
}

you need a [clearfix](http://stackoverflow.com/questions/8554043/what-is-a-clearfix) — giorgio, Nov 24 '16 at 08:09

score 1 · Answer 1 · answered Nov 24 '16 at 08:13

1

You need to clear the floating. Css clear property Something like this:

#cont:after {
    content: '';
    display: block;
    clear: both;
}

See here.

answered Nov 24 '16 at 08:13

Sigee

362
2
11

score 0 · Answer 2 · answered Nov 24 '16 at 08:10

Floated divs will not let the main div to grow according to the childs.add an additional div to maintain the main divs height.

<div id ="cont">
    <div class ="box" > box1 </div>
    <div class ="box" > box2 </div>
    <div class ="box" > box3 </div>
    <div class ="clrfx" > </div>
</div>
<div id="foo"> footer </div>

and the css for new div

.clrfx{
    clear:both;
}

score -1 · Answer 3 · answered Nov 24 '16 at 08:12

Use Display:inline-block property in your box

#cont{
width:950px;
border:1px solid red; 
float:left;
}
.box{
    width:300px;
     height:100px;
    border:1px solid black;
    background-color:orange;
       float:left;  
       display:inline-block;
}
#foo{
    width:100px;
    background-color:blue;
    clear:both;
}

<div id ="cont">
    <div class ="box" > box1 </div>
    <div class ="box" > box2 </div>
    <div class ="box" > box3 </div>
</div>
<div id="foo"> footer </div>

border in css not fitting according to div

3 Answers3