I may be missing something obvious here, but I need a little CSS help. I have a three column layout for part of the page. Instead of struggling to get them all equal heights (I had a “solution” for that, but it only worked in Safari), I thought I would just dump them into a container div and use that to set the background color. However, the container div isn’t stretching to the height of its children.
This is what happens:
The code:
#container {
display: block;
width: 800px;
margin: auto;
background: #cccccc;
padding: 25px;
border-top: 2px solid #888777;
}#left {
float: left;
width: 266px;
font-size: .85em;
/*padding: 12px 0px 12px 12px;*/
}#center {
float: left;
width: 266px;
font-size: .85em;
/*padding: 12px 12px 12px 12px;*/
}#right {
float: left;
width: 266px;
font-size: .85em;
/*padding: 12px 0px 12px 12px;*/
}#footer {
background: #cccccc;
width: 800px;
display: block;
font-family: Arial, sans-serif;
font-size: 1em;
border-top: 2px solid #888777;
padding: 25px;
}#clear {
clear: both;
display: block;
}
I want to simply make part of the page 3 columns wide with fixed width columns. I want the columns to appear to be of equal length, and share the same background color (#cccccc), and I want the page to work in IE.
Can anyone help?
Popularity: 100% [?]
