I'm pursuing the holy grail of creating a two-column CSS layout with
footer AND where the colors of the columns actually go all the way
down.
The code is below.
Here is a graphic of how it looks in each IE and FIREFOX:
http://www.tanguay.info/web/examples...xIeProblem.png
Does anyone have any idea what I might try to get both IE and FIREFOX
to render this layout similarly? I've noticed that Explorer has
problems with padding many times, but don't know how to fix this one.
Thanks,
Edward Tanguay
All my projects: http:/www.tanguay.inf o
---
<head>
<style>
#siteWrapper {
position:relati ve;
text-align:left;
background:ligh tgreen url("images/rightBackground Grey.png") repeat-y
top right;
width:760px;
}
#contentWrapper {
position:relati ve;
text-align:left;
background:ligh tgreen url("images/rightBackground Grey.png") repeat-y
top right;
width:760px;
}
#rightcol {
position:relati ve;
float:right;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
}
#centercol {
position:relati ve;
width:560px;
}
#footer {
position:relati ve;
background-color:beige;
text-align:center;
clear:both;
}
#main p {
margin: 0;
}
</style>
</head>
<body>
<div id="siteWrapper ">
<div id="contentWrap per">
<div id="rightcol">
<p>This can be text that explains things on the right.</p>
</div>
<div id="centercol" >
<p>Issues with this layout:</p>
<p>No matter how much texch text you add to this center area, the
columns left and right expand around it, hard to do in CSS actuallyNo
matter how much text you add to this center area, the columns left and
right expand around it, hard to do in CSS actuallyNo matter how much
text you add to this center area, the columns left and right expand
around it, hard to do in CSS actuallyNo matter how much text you add to
this center area, the columns left and right expand around it, hard to
do in CSS actuallyNo matter how much text you add to this center area,
the columns left and right expand around it, hard to do in CSS
actually.</p>
</div>
</div>
<div id="footer">
<p>The is the footer where you can put in some kind of phrase or
more links, etc.</p>
</div>
</div>
</body>
</html>
