CSS: Floating divs have 0 height

Question

I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:

HTML

<div id="outer">
    <div id="left">
         ...
    <div id="right">
</div>

CSS

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}

However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?

Incomputable

google.com/… – Sublimation

This was my second result found at google. – Aponeurosis

Answer 1

It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.

You can use the overflow style to make the parent element take the floating elements in consideration:

#outer { overflow: auto; }

Update:

As of 2020 there is a value for the display property that can be used (as @timgl07 pointed out in a comment), that has less unwanted side effects:

#outer { display: flow-root; }

Besom

+1 for explaining why exactly this happens. To get technical, this causes the outer element to establish a new block formatting context for its floats, so it's able to expand to contain them. – Barque

@airo: You can try overflow: hidden; instead. It normally doesn't matter what overflow mode you use as long as the height is not defined for the surrounding element, but some browsers may act up in some cases, depending on the rendering mode and surrounding elements. – Besom

WOW This actually works! (and I don't even know why this works because the default value of overflow is already auto and you are just re-setting it again...) – Magnetism

@Derek: The default value for overflow for a div is visible, not auto. – Besom

If the div has shadows, overflow: auto; is not a good choice because it's gonna hide anything beyond borders. Then, the best option would be overflow: visible;. – Helico

@PauloDosSantos: You are correct that the style may affect the shadow (or any effect that is drawn outside the element itself) however using overflow: visible; doesn't have the desired effect of creating a block formatting context as that is already the default. You may need to wrap it in another element, so that you can use this technique on the inner element and the shadow on the outer element. – Besom

Setting the overflow property may cause unwanted side effects. You should use display: flow-root to create a new block formatting context without side effects, see MDN Block formatting context. – Talanian

@timlg07: It can indeed have unwanted side effects, but that's pretty much what was available at the time. The `flow-root' value wasn't widely supported until 2020. – Besom

@Besom I know, but that doesn't mean we shouldn't use it nowadays. So adding it as update to your answer (or at least as comment as I did) may be a good idea. – Talanian

@timlg07: Yes, that is a good idea. I added an update to the answer. – Besom

Answer 2

There are a couple of solutions to this issue:

#outer: overflow: hidden;

or add some non-displaying content to the outer div that comes after the floated divs that you then add a clear: both style rule to.

You can also add, through css, the :after pseudo-element to insert content after those divs that you then apply clear: both to - this has the advantage of not requiring extra markup.

My preference is the first one.

Basia

Answer 3

You could clear the float by inserting an element after the floated elements that has a clear property applied to it because floated child elements cause the parent to have 0 height since they don't take the height of the floated children into consideration.

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div class="clear"></div> 
</div>

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}
.clear{ clear: both; } 

Slangy

Answer 4

Try this:

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div style="clear:both"></div>
</div>

Gentility

Answer 5

add overflow: hidden; to the main div.

<style type="text/css">
#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
overflow: hidden;
border: 1px solid green;
}

#left{ 
    float:left;
border: 1px solid red;
}

#right{
    width:500px;
    float:right;
border: 1px solid yellow;
}
</style>

Muth

Answer 6

You must also float the outer div. Div's that contain floatet divs and that are not floated themselves collapse.

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
    float:left;
}

#left{
    float:left;
    width:300px;
}

#right{
    width:500px;
    float:right;
}

Convolve

Answer 7

How bout like this:

<style type="text/css">
#outer{
   background-color:rgba(255,255,255,.5);
   width:800px;
   border:thin solid #000000;
   height:300px;
   margin:5px;
   padding:10px;
}

#left{
   float:left;
   border:thin dashed #000000;
   width:385px;
   height:100px;
   margin:5px;
}

#right{
   width:385px;
   float:left;
   border:thin dashed #000000;
   height:100px;
   margin:5px;
}
</style>

<div id="outer">
   <div id="left">
   </div>
        ...
   <div id="right">
</div>
</div>

Favorite

Answer 8

if div inside a parent is floated it is no longer part of parent div:check it by inspecting parent element.no to fix your problem there are two methods: 1)make a empty div at end inside parent class it as .blank all following css

.blank:after{
        content: "";
        clear:both;
        display:block;
    }

Or 2) give parent a class .clear-fix and add css

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

it will give parent a height equal to contents

Prosaism