CSS DIVS and Auto height

Question

this is driving me insane and I am obviously missing something which i cannot seem see.

I have some nested div - below.

<!DOCTYPE html>
<html>
<head>
    <title>Immigration Reform</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>

<link rel="stylesheet" type="Text/css" href="css/test.css" media="screen" />

<div class="HeaderWrap">
    <div class ="Header">
        <div class="HeaderLogo"></div>
    </div>
</div>  

<div class="BodyWrap">
    <div class="Body">  
        <div class="BodyLeft"></div>
        <div class="BodyRight"></div>   
    </div>  
</div>

<div class="FooterWrap">
    <div class="Footer">
        <div class="FooterPicture"></div>
        <div class="Footer1"></div>
        <div class="Footer2"></div>
        <div class="Fotter3"></div>
        <div class="Footer4"></div>
    </div>
</div>

</body>
</html>

Not matter what i do, the .Body height does not automatically adjust when the child divs grow past the min-height.

CSS CODe

.HeaderWrap,
.BodyWrap,
.FooterWrap{float:left; width:100%; border:1px solid yellow; clear:both;}

.Header,
.Body,
.Footer{width:960px; border: 1px solid green; margin:0 auto; clear:both;}

.Header{height:227px; background:url("../Images/man-with-flag-1.png") no-repeat;#box-shadow: 0 0 20px 0 black; z-index:-1; clear:both;}
.HeaderLogo{float:left; height:100px; width:150px; box-shadow: 10px 10px 5px #000000; background:url("../Images/visa.png") no-repeat; position:relative; right:-45px; bottom:-165px; border:5px solid white; z-index:999;clear:both;}

.BodyWrap {border: 1px solid red;}
.Body {position: relative; border: 1px solid green; min-height: 450px; clear:both;}

.BodyLeft{float:left; height:900px; #min-height: 900px; border:1px solid yellow; position: relative; #top: -90px; z-index:-1;background:#b1b6bc; #box-shadow: 0 0 15px 0  black; width:26%; clear:both;}

What i am missing? thank you.

Looks like you'll need to [clear floats](http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/) after `.bodyLeft` and `.bodyRight`. — showdev, Dec 09 '14 at 00:37
I already have clear:both on both those sections. Did i miss something? — user68650, Dec 09 '14 at 00:41
Clearing floats within a floated element's CSS definition generally won't work. You've got to do it before/after the floated elements. I usually use the "[clearfix class](http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/#method-3-the-clearfix-class)" method applied to the parent of the floated elements. — showdev, Dec 09 '14 at 00:46
This did not work at all. addeded .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie 6/7 */ } and mofified html - no go. — user68650, Dec 09 '14 at 01:41
oopps. the clearfix need tobe applied to the parent not the child! Excellent. — user68650, Dec 09 '14 at 01:48

score 1 · Accepted Answer · answered Dec 09 '14 at 01:33

The .Body element does not expand vertically because its children are floated, which removes the children from the normal document flow.

In order for .Body to expand with the height of its children, clear floats after the floated elements. The method I usually use to do this is Nicolas Gallagher's "Micro Clearfix Hack" (or a variation of it). He sets up a class that can be applied to the floated element's parent. Something like this:

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

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

<div class="Body clearfix">
    ...
</div>

Test it below:

.HeaderWrap, .BodyWrap, .FooterWrap {
    float:left;
    width:100%;
    border:1px solid yellow;
    clear:both;
}
.Header, .Body, .Footer {
    width:960px;
    border: 1px solid green;
    margin:0 auto;
    clear:both;
}
.Header {
    height:227px;
    background:url("../Images/man-with-flag-1.png") no-repeat;
    #box-shadow: 0 0 20px 0 black;
    z-index:-1;
    clear:both;
}
.HeaderLogo {
    float:left;
    height:100px;
    width:150px;
    box-shadow: 10px 10px 5px #000000;
    background:url("../Images/visa.png") no-repeat;
    position:relative;
    right:-45px;
    bottom:-165px;
    border:5px solid white;
    z-index:999;
    clear:both;
}
.BodyWrap {
    border: 1px solid red;
}
.Body {
    position: relative;
    border: 1px solid green;
    min-height: 450px;
    clear:both;
}
.BodyLeft {
    float:left;
    height:900px;
    #min-height: 900px;
    border:1px solid yellow;
    position: relative;
    #top: -90px;
    z-index:-1;
    background:#b1b6bc;
    #box-shadow: 0 0 15px 0 black;
    width:26%;
    clear:both;
}



.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  zoom: 1; /* ie 6/7 */
}

<div class="HeaderWrap">
    <div class="Header">
        <div class="HeaderLogo"></div>
    </div>
</div>
<div class="BodyWrap">
    <div class="Body clearfix">
        <div class="BodyLeft"></div>
        <div class="BodyRight"></div>
    </div>
</div>
<div class="FooterWrap">
    <div class="Footer">
        <div class="FooterPicture"></div>
        <div class="Footer1"></div>
        <div class="Footer2"></div>
        <div class="Fotter3"></div>
        <div class="Footer4"></div>
    </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

Check the code here: JSFiddle. You can add display: table-cell to .Body:

.Header, .Body, .Footer {
    width:960px; 
    border: 1px solid green; 
    margin:0 auto; 
    clear:both; 
    display: table-cell;
}:

display: table-cell;

But it does not work for IE7.

Also for your reference: How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

edited May 23 '17 at 11:52

Community

1
1

answered Dec 09 '14 at 01:02

Joy

9,430
11
44
95

This worked but broke my centering of the page. is there a method to adjust? right now is use "margin:0 auto" all sections to center. – user68650 Dec 09 '14 at 01:44

CSS DIVS and Auto height

2 Answers2