Can't seem to get this to work. 
Goal:
Current:
- Columns are Fixed - Fluid - Fixed
- Regardless of whatever column is the longest, the other two needs to be the same height of the longest column.
- The minimum height based on the browser's viewport.
Footer is optional really if its a problem. The scrollbar always shows, and it does something weird in IE anyways.
In terms of browser support, FX2/IE7. IE 6 is a maybe.
I've been googling and throwing in full height codes left and right to no avail. Some might still be present...
Any help is greatly appreciated.
Goal:
Current:
- Columns are Fixed - Fluid - Fixed
- Regardless of whatever column is the longest, the other two needs to be the same height of the longest column.
- The minimum height based on the browser's viewport.
Footer is optional really if its a problem. The scrollbar always shows, and it does something weird in IE anyways.
In terms of browser support, FX2/IE7. IE 6 is a maybe.
I've been googling and throwing in full height codes left and right to no avail. Some might still be present...
Any help is greatly appreciated.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Halp!</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
margin:0;
padding:0;
height: 100%;
background: #2e2e2e;
color: #FFF;
line-height:1.5;
}
#pagecontainer {
position:relative; /* needed for footer positioning*/
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#topsection{ /*Height of top section*/
background: #FF0;
height: 80px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{ /* 0 RightColumnWidth 0 LeftColumnWidth*/
margin: 0 200px 0 200px;
background: #F00;
}
#leftcolumn{ /*Width of left column*/
float: left;
width: 200px;
margin-left: -100%;
padding-bottom: 20px; /* bottom padding for footer */
height: 100%;
background: #00F;
}
#rightcolumn{ /*Width of right column*/
float: left;
width: 200px;
margin-left: -200px;
padding-bottom: 20px; /* bottom padding for footer */
height: 100%;
background: #0F0;
}
#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#888;
height: 20px;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="pagecontainer">
<!-- Wrap entire page in a div -->
<div id="contentwrapper">
<!-- Wrap main column in a div -->
<div id="contentcolumn">
<!--Page Heading-->
<div id="topsection"><h1>Header</h1></div>
Main Column
</div>
</div>
<!-- Left Column -->
<div id="leftcolumn">
Left Column
</div>
<!-- Right Column -->
<div id="rightcolumn">
Right Column
</div>
<!-- Footer -->
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>
