...

View Full Version : Need some help with a Layout. Header, 3 Columns, Footer



IdentityCrisis
02-09-2005, 06: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

mcdougals4all
02-09-2005, 07:03 PM
This is a pretty common problem, and luckily there's a fairly simple solution:
http://www.alistapart.com/articles/fauxcolumns/

Hope that helps.

IdentityCrisis
02-09-2005, 07:39 PM
Thanks!!

That will definately work for my layout that I'm doing...

I'm just wondering, is there a way to do it without the BG Image?

Thanks

IC

rmedek
02-10-2005, 03:49 AM
Sadly, that's the whole point of the "faux-columns" thing. You can use "display: table-cell" but it won't work in Safari. Or, you can try adapting this example (http://richardmedek.com/temp/example6.htm) to work with three columns...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum