IdentityCrisis
02-09-2005, 05:59 PM
Hey, I'm trying to do this layout in CSS, and I've gone over it a few times, with no luck. I'm trying to make a page that has a header, 3 columns, and a footer - a farily common layout. The problem I'm having is with the containing DIVs. I want the 3 columns to all be the same height. I've attached a graphic that will show you the idea I want. Note, the left and right column will not have enough information in them to make them expand to the height of the center column.
Again, I want all 3 columns to be the same height.
Here's what I've tried so far...
<style>
BODY {background: #DADADA;}
#Container {
width: 600px;
background: #FFFFFF;
}
/*Header*/
#Header {
float: left;
width: 600px;
background: #000000;
}
/*Left Column*/
#Column1 {
float: left;
width: 150px;
bgcolor: #DADADA;
}
/*Center Column */
#Column2 {
float: left;
width: 300px;
background: #FFFFFF;
}
/*Right Column */
#Column3 {
float: left;
width: 150px;
background: #FFFFFF;
}
/*Footer*/
#Footer {
float: left;
width: 600px;
background: #000000;
}
</style>
<body>
<div id="Container">
<div id="Header">
</div>
<div id="Column1">
</div>
<div id="Column2">
</div>
<div id="Column3">
</div>
<div id="Footer">
</div>
</div>
</body>
If anyone can guide me in the right direction, I'd REALLY appreciate it!!!
Thanks
IC
Again, I want all 3 columns to be the same height.
Here's what I've tried so far...
<style>
BODY {background: #DADADA;}
#Container {
width: 600px;
background: #FFFFFF;
}
/*Header*/
#Header {
float: left;
width: 600px;
background: #000000;
}
/*Left Column*/
#Column1 {
float: left;
width: 150px;
bgcolor: #DADADA;
}
/*Center Column */
#Column2 {
float: left;
width: 300px;
background: #FFFFFF;
}
/*Right Column */
#Column3 {
float: left;
width: 150px;
background: #FFFFFF;
}
/*Footer*/
#Footer {
float: left;
width: 600px;
background: #000000;
}
</style>
<body>
<div id="Container">
<div id="Header">
</div>
<div id="Column1">
</div>
<div id="Column2">
</div>
<div id="Column3">
</div>
<div id="Footer">
</div>
</div>
</body>
If anyone can guide me in the right direction, I'd REALLY appreciate it!!!
Thanks
IC