2 replies [Last post]
mstrop
mstrop's picture
User offline. Last seen 1 year 22 weeks ago. Offline
newbie
Timezone: GMT+2
Joined: 2010-09-04
Posts: 2
Points: 3

Hi,

the questions sounds stupid to me, but I've spent hours googling for an answer without any solid result. I need to create a 3column web page. I don't want to use JS or "table" for creating the layout - just pure CSS. Left and right columns are fixed width positioned just next to page borders. So, let's say something like

#left_column{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
}
 
#right_column{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
}

No problem so far.

Problem 1 - Middle column has to be positioned between them, fully filling the gap, which is for sure dependent on browser window size

#middle_column{
position: absolute;
top: 0px;
left: 200px;
width: ??????;
}

Problem 2 - All of the 3 columns have to have the same height, equal to the highest of them. As their content is not known to me during the design phase, I cannot use something like height: XXXpx; for all of them, where XXX will be same number.

Please, can anybody help me, how to solve this issue with pure CSS? Or is TABLE only way out of this?

Marek

Deuce
Deuce's picture
User offline. Last seen 2 days 17 hours ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2005-11-20
Posts: 4416
Points: 1835

Use float, don't use

Use float, don't use position.
http://www.alistapart.com/articles/holygrail

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mstrop
mstrop's picture
User offline. Last seen 1 year 22 weeks ago. Offline
newbie
Timezone: GMT+2
Joined: 2010-09-04
Posts: 2
Points: 3

That's it! Thanks a lot!

That's it! Thanks a lot!