I'm afraid your 3 columns of equal height was a lucky ellusion. It doesn't work that way. There are problems with the way browsers interprit the 'height: 100%' style.
In the code below, I have changed you layout structure and added some additional styles and I have added a line to your footer style.
What I suggest you do to create the ellusion of equal columns is to create an image 1px high and the width of your central div that matches your column colours and widths.
Set this as a background image with a repeat in the x direction.
- Code: Select all
<html> <head> <title>3 Columns Equal Height.</title> <style type="text/css">
body {
font-size:12px;
font-family:Arial;
color: black;
background-color: #f1f1f1;
text-align: center; /* centering the content for IE6 */
}
#wrapper {
display:table; /* must put this in for FireFox. */
width:777px;
margin:auto; /* for IE6 and Firfox centering */
text-align:left; /* so that IE6 and Firefox puts the text to the left
*/
/*border:1px solid blue;*/
height:400px; /* Have to put SOMETHING in here for the height for both
browser. DO NOT put in a percentage, must be a pixel value */
}
#header{
background-color: red;
}
#mainMenu{
background-color: yellow;
}
#sidebar {
float:left; /* float the menu to the left */
width:150px;
background-color:#666666;
/*border:1px solid red;*/
height:100%; /* so the menu has the height of the main content and
visa versa */
}
#sidebarRight
{
width:100px;
float:right;
background-color:#999999;
height:100%;
}
#main {
float:left; /* float the content to the right */
width:527px;
border:0px solid green;
background-color:#CCCCCC;
height:100%;/* so the content has the height of the menu and visa versa */
}
#footer{
background-color:#00FFCC;
height:50px;
float:left;
clear: both; /* Added this line here. */
}
/* make it so that the main content has a 5px "padding" in both Ie and
FireFox. */
/* New styles. */
#central {
position: relative;
}
h2 {
padding: 5px;
margin: 0;
}
p {
padding: 10px 5px 0 5px;;
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="mainMenu">Main Menu</div>
<div id='central'> <!-- This div wraps around the three parts of the central section -->
<div id="sidebar"> <h2>Menu</h2> <p>test</p> <p>test</p> <p>test</p> </div>
<div id="main">
<h2>Main Content</h2> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p>
</div>
<div id="sidebarRight">right</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
3 column 100% Height, just problem with footer
Feb 26th, 2007, 15:59
LinkBacks (?)
