Created and customized the CSS layout but now only have one minor problem. There is some issues with the height property in the #wrapper class as it can not tell the the actual height (substract the height of the header and footer from the wrapper height). No need to worry about the 3 columns as it is already wrapped inside the #wrapper and their height would depend on the wrapper's height.
So, anyone know what I did wrong with the wrapper height??
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #FFFF00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
width: 100%;
}
table {
border: 0px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
#columnleft {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: left;
}
#columnright {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: right;
}
#footer {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
#clearfooter {
clear: both;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position:relative; */
}
#main {
margin: 0px;
padding: 0px;
width: 79.8%; /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #FFFFFF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
float: left;
}
#wrapper {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
/* min-height: 80%; */ /* Might not be needed, it's an IE Hack... */
background-color: #FF0000;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>
<body>
<div id="header">Header Text</div>
<div id="wrapper">
<div id="columnleft">Left Text</div>
<div id="main">Center Content</div>
<div id="columnright">Right Text</div>
</div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html>
[/code]
So, I'm giving a 500 points for this because it is a little urgent and pretty difficult. I need this to work for IE windows and Gecko browsers.. If possible, that it work for Opera and Safari but not required.
Thanks,
FletchSOD
by: sciwriterPosted on 2005-03-23 at 20:06:48ID: 13618694
displays perfect for me, both browsers. To help you debug, make a fixed width for testing purposes, that way to can see any overflow / mismatch down to about 2 px. Once debugged, go back to full width. Can't see any defects. Are you sure you have cleaned out your browsers cache from the old versions, and refreshed?