CODEWITHSUNDEEP
htmlcss
Aamir Rizwan
Aamir Rizwan

Reputation: 887

Height of outer div not expanding with inner div

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 600px wide respectively. When I add content to inner divs neither bodyMain nor body expands in height . All heights are auto.

Here is the code: http://jsfiddle.net/TqxHq/18/

HTML:

<body>
    <div id="bodyMain">
      <div id="body">
        <div id="bodyLeft"> left text goes here<br />
        </div>
        <div id="bodyRight">Right text goes here
        </div>
      </div>
    </div>
</body>

CSS:

#bodyMain{
    border:1px solid red;
    width:100%;
    height:auto;

}
#body{
    border:1px solid green;
    width:804px;
    height:auto;
    margin:auto;
}
#bodyLeft{
     border:1px solid blue;
    float:left;
    width:200PX;
    height:auto;
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600PX;
    height:auto;
}

Upvotes: 18

Views: 42638

Answers (5)

BlueSky
BlueSky

Reputation: 79

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

Thank you

Upvotes: 3

irfanmcsd
irfanmcsd

Reputation: 6561

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

Upvotes: 43

Bram Vanroy
Bram Vanroy

Reputation: 28437

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.

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206038

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;*/
}

Upvotes: 2

jacktheripper
jacktheripper

Reputation: 14219

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

Upvotes: 8

Related Questions