Basic Css Layout Issue

moldboy

Apr 9 2006, 07:23 PM

Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem being I don't know how to make a floated cell be the same height as another. FOr example

CODE

<div id="main">

<div id="left">
just some </br> stuff over </br> here!
</div>

<div id="right">
but...</br> over here </br> I have </br> even more stuff</br> to </br> display</br>
</div>

</div>

now If I float the left to the left and the right to the right and set ther widths so that they will be beside eachother the left div is shorter then the right, which makes sense because there is more content in the right. I want to know how to make them the same height without specisifing the actual height, because it may change.

Comment/Reply (w/o sign-up)

truefusion

Apr 9 2006, 08:22 PM

If you're under standard-compliant mode, then i dont think you can specify 100% height. But, with certain styles, you can make it seem like it is. For example, if "left" has a border, remove it, and do the same with "right". But, just have "main" with the border.

Comment/Reply (w/o sign-up)

jlhaslip

Apr 9 2006, 08:51 PM

There is a technique known as "faux columns" which would apply to solve your problem of the height of the left column being less than the Main Content. Look it up at http://www.alistapart.com.
And the other thing you would want to add to the css for the page you list up there would be a margin on the right - hand div that is equal to or greater than the width of the left-hand column. The margin would be in the same direction as the floated column. ie: margin-left. It would be un-neccesary to float the right hand column on the page.

HTML

<div id="main">

<div id="left">
just some </br> stuff over </br> here!
</div>

<div id="right">
but...</br> over here </br> I have </br> even more stuff</br> to </br> display</br>
</div>

Css for the page:

CODE

body { margin:0; padding: 0;}
#main {}
#left { float:left; width:20%;}
#right { margin-left: 20%;}

Plus the code required for the faux-columns.

Comment/Reply (w/o sign-up)

moldboy

Apr 9 2006, 10:31 PM

QUOTE

There is a technique known as "faux columns"

thanks that's exaclty what I wanted, although I thought there might be a diffrent way as all the sites use this two coloum structure and still have the same height. f there is another way, please tell.

Comment/Reply (w/o sign-up)

jlhaslip

Apr 10 2006, 12:18 AM

If there was another way that worked and I knew about it, I would have mentioned it.
Also, don't forget a Doc Type Declaration.

Comment/Reply (w/o sign-up)

Tyssen

Apr 10 2006, 12:53 AM

QUOTE(jlhaslip @ Apr 10 2006, 10:18 AM)

If there was another way that worked and I knew about it, I would have mentioned it.

http://www.positioniseverything.net/articles/onetruelayout/

Comment/Reply (w/o sign-up)

Basic Css Layout Issue - Floated Cell with similar height

Basic Css Layout Issue - Floated Cell with similar height