3column lyout - same height of all cols - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

3column lyout - same height of all cols

three floating divs - how to get same height of all of them

guidee

1:19 am on Jan 8, 2004 (gmt 0)

Hello, please could somebody help me with this problem? How can i get the same height of all columns with code below? (i tryead .cleaner but id didn't solve it):

#leftcol {
float: left;
width: 15%;
color: #000;
background: red;
text-align:right;
}

#middle {
width: 70%;
color: #000;
background: blue;
border: 1px solid blue; */
float: left;
}

#rightcol {
float: left;
width: 15%;
color: #000;
background: red;
}

<div id="middle">
middle
</div>

<div id="rightcol">
right
</div>

can be seen on [jak.jinak.cz...]
thanks for advices!

IeuanJ

9:26 am on Jan 8, 2004 (gmt 0)

Hi there, I don't think you can without utilising some sort of scripting.

What I tend to do the following :

1) Wrap everything in a bodywrapper div.
2) Make the floating divs transparent.
3) Make the middle colum div a non-floated div.
4) Move the middle coilum div to be defined after both floats.
4) Assign margins around the middle div in orer to clear space for the floats.
5) Now you can utilise colors/borders to make it seem like you have tree seperate columns as I have done below.

While the floated divs arent actually as long as the middle column, the colours fool you into thinking they are.

<html>
<head>
<title>Test Page</title>
<style>
#bodywrapper {
background: red;
}
#leftcol {
float: left;
width: 12%;
color: #000;
text-align:right;
}
#middle {
margin-left: 15%;
margin-right: 15%;
color: #000;
background: blue;
border-right: 1px solid blue;
border-left: 1px solid blue;
}
#rightcol {
float: right;
width: 12%;
color: #000;
}
</style>
</head>

<body>

<div id="rightcol">
right
</div>

<div id="middle">
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
</div>

</div>
</body>
</html>

SuzyUK

10:18 am on Jan 8, 2004 (gmt 0)

Hi Guidee Welcome to WebmasterWorld!

see msg#18

3 Column CSS Layout (with header and footer) [webmasterworld.com]

it's not fully tested.. I'm still working on it.. but would appreciate your thoughts if you decide to tinker

Suzy

guidee

11:38 am on Jan 8, 2004 (gmt 0)

IeuanJ: thanks, that seems like quite nice way around, im applying this layout and only problem im getting is that in IE is the middle column aligned to the bottom so there is 1 line margin in bg color above middle col. but this should be easier to solve, thx!

SuzyUk: wow, for this layout i need to take another coffee:) cause i tryed to keep my styles as simple as possible this seems bit complicated to me - during my experiments with css i found that sometimes is easier to change the layout than try to make exactly what i want. but deffinitely i will explore it, thx .

Longhaired Genius

12:58 pm on Jan 8, 2004 (gmt 0)

If I had to have three colums of the same height side by side I would use a table in a heartbeat. I don't see anything wrong with nice clean table code styled with css.

IeuanJ

1:13 pm on Jan 8, 2004 (gmt 0)

....Except that tables reduce your freedom to change the layout considerably.

For example if you wanted to change from a three column design to a two column one (with both sidebars on one side, one abover the other). It would mean changine EVERY page with tables. With divs is a few lines in the CSS file.

For such a simple design I think the reduced flexability is a great cost to pay.