Height of outer div not expanding with inner div

Question

I have a bodyMain div of 100% width. Inside it is a body div 800px with auto margin(can I use \'body\' as id ?). Inside this are two divs bodyLeft and bodyRight 200px and 60

Answer 1

The simple solution is to have outer div overflow:hidden (in style attribute).

Thank you

Answer 2

jsFiddle demo

*{
    margin:0;
    padding:0;
}

#bodyMain{
    position:relative;
    overflow:hidden; /*added*/
    border:1px solid red;
    /*removed height:auto;*/
    /*removed width:100%;*/
}
#body{
    display:table;/*added*/
    border:1px solid green;
    width:804px;
    margin: 0 auto; /*improved*/
}
#bodyLeft{
    border:1px solid blue;
    float:left;
    width:200px;
    /*removed height:auto;*/
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600px;
    /*removed height:auto;*/
}

Answer 3

This is a common issue when working with floats. There are a couple of common solutions:

1. Add a div after the floats with clear: both

2. Add the two floats into a container with the CSS attribute overflow: auto

3. Make the parent element a float

4. Using the :after CSS pseudo element with the CSS: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

5. Adding a set height to the parent element

See this article

Answer 4

To avoid confusion with predefined tag names, refrain from using body, html, or head as ID attribute values.

I agree with Muhammed Irfan's idea. I don't agree with his method though. Avoid inline styling except for small snippets. Especially in this case, because it is likely that there will be another case where clear: both is necessary. So, add a div, give it a meaningful class name and apply the additional CSS.

See this fiddle for an example.

Answer 5

You must add

<div style="clear:both;"></div> 

at the end of floating div to fix this issue. see here

Problem happens when a floated element is within a container box and element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

clear:both
clearfix