Home › CSS 100% height DIV hacks

CSS 100% height DIV hacks 

James
Joined:
02/21/2009
Posts:
130

March 29, 2010 03:11:38    Last update: January 11, 2011 20:19:39
This is an age old problem. Since it comes up time and time again, I'm writing this down for future reference.

Let's start with a two-column layout generated by the 2 Column Layout Generator: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Column CSS Layout - concise design</title>
<style type='text/css'>
.mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   background-color: #f4f4f4
}
.header{
   float: left;
   color: white;
   width: 100%;
   background-color: #5474f4
}
.colleft{
   position: relative;
   width: 100%;
   right: 32%;
   background-color: #f4f4f4
}
.col1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 30%;
   left: 101%;
   background-color: #e6e6e6
}
.col2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 66%;
   left: 3%;
   background-color: #e6e6e6
}
.footer{
   float: left;
   width: 100%;
   background-color: #b4caf7
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
    <div class="header">
        header
    </div>
    <div class="colleft">
        <div class="col1">
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
        </div>
        <div class="col2">
            left
        </div> 
    </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

It renders like this:


The left column is shorter than the right column.

How to make the left and right column the same height? Adding height: 100% to the style sheet of the left column doesn't cut it. There are several hacks, none of them are straightforward:
  1. In search of the One True Layout
  2. Faux Columns
  3. Creating Liquid Layouts with Negative Margins


In short, there's no instruction in CSS that tells a DIV that its height should be 100% of that of the container.

Comparatively, a table based solution is a lot easier: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Column CSS Layout - concise design</title>
<style type='text/css'>
table {
    width: 100%;
}

td.header {
   color: white;
   background-color: #5474f4
}

td.left {
   vertical-align: top;
   width: 70%;
   background-color: #e6e6f6
}

td.right {
   vertical-align: top;
   background-color: #e6f6e6
}

td.footer {
   background-color: #b4caf7
}

body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
</style>
</head>
<body>

<table>
<tr><td colspan="2" class="header">header</td></tr>
<tr>
<td class="left">left</td>
<td class="right">
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
            right<br/>
</td>
<tr><td colspan="2" class="footer">footer</td></tr>
</table>
</body>
</html>


Share |
| Comment  | Tags
 

Related Notes