CODEWITHSUNDEEP
htmlcss
user68650
user68650

Reputation: 115

CSS DIVS and Auto height

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.

Upvotes: 0

Views: 110

Answers (2)

showdev
showdev

Reputation: 29188

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>

Upvotes: 1

Joy
Joy

Reputation: 9560

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?

Upvotes: 0

Related Questions