realize a grid layout by setting the min-height of a div

Hi,

I am trying to realize the following layout:


---------------------- 
 Header 
---------------------- 
menu Ś content 
---------------------- 
 Footer 
----------------------

My requirement is that even when the "content" div does not have enough data to stretch to the bottom of the screen, the footer should still be positioned flush against the bottom of the screen.

I have tried various approaches but none work perfectly. I have to support at least IE6/7 and FF. I have the following code:

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head></head>
<body>
<div id="doc4" class="yui-t2"> 
<div id="hd">header</div> 
<div id="bd">
<div id="yui-main"> 
<div class="yui-b">content</div> 
</div> 
<div class="yui-b">menu</div>
</div>
<div id="ft">footer</div> 
</div>
</body>
</html>

CSS:


html, body{
margin:0;
padding: 0;
height:100%;
border: none;
text-align: center;
background: #060606;
}
 
body {
font-family: tahoma,helvetica,sans-serif;
font-size: 12px;
color: white;
background: #807D73;
}#doc4 {
height:auto;
min-height:100%;
background-color:red;
}
#hd {
height:10%;
background-color:blue;
}
#bd {
min-height:87%;
height:auto !important;
height:87%;
background-color:green;
}#ft {
height:3%;
width:100%;
background-color:orange;
}

I am trying to use the "min-height fast hack" given here [dustindiaz.com ] but it is not working.

Can someone please please please shed light on why it is not working or give me ideas on how I can achieve my layout using CSS.

html, body{ margin:0; padding: 0; height:100%; border: none; background: #060606; } body { background: #807D73; }#doc4, #hd, #bd, #ft { /*background-color:white;*/ } #doc4 { height:100%; min-height:100%; background-color:red; } #hd { height:9.9%; background-color:blue; } #bd { min-height: 87%; height:auto !important; height: 87%; background-color:green; }

#ft { height:3%; width:100%; background-color:orange; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head></head> <body> <div id="doc4" class="yui-t2"> <div id="hd">header</div> <div id="bd"> <div id="yui-main"> <div class="yui-b">content</div> </div> <div class="yui-b">menu</div> </div> <div id="ft">footer</div> </div> </body> </html>

realize a grid layout by setting the min-height of a div

min-height div fast hack ie ff

fahadkhowaja

fahadkhowaja

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week