View Full Version : CSS divs+100% height

02-10-2004, 06:01 AM
Are there any css gurus that can answer this question for me?

How do you set a two column css div layout to expand with the content. Using height:100% for the divs won't do it. If you have to float the divs to get them to align side by side for the layout each div that floats leaves it's container.

Here is an example of what I am trying to do.

One horizontal div on top div, the header.
Two vertical divs aligned side by side to eachother by the only way I know how, using float:left, below.

One more horizontal div-the footer below the two vertical divs.

Problems, if content in the two vertical divs grow beyond the window's viewable size, the content overflows the footer div.. not good.
I want to make the two vertical divs able to grow and shrink just like tables would in a tabular layout. Keep in mind that this would have to work on atleast IE and opera.

02-10-2004, 09:19 AM
How about a link? Where are you up to?
I'm no guru, but I would think that if you keep all elements inline (ie: don't use absolute positioning) and give the footer {clear:both} you shouldn't have any problem (except to tweek it for IE).
Link to your code, and I'll have a quick bash.

02-10-2004, 09:46 AM
mind if I uplaod it at a text file?

I don't have the code up yet..

But an exmple of what I mean is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml">

<div style="border:2px solid green;width:750px;position:relative;margin-left:auto;margin-right:auto;">

<div style="float:left;width:150px;border:2px solid red;"></div>

<div style="width:550px;border:2px solid red;float:left;position:relative;left:0px;top:0px;">
<h1>red fungus hurts everyone</h1>


If you view the page you'll notice that the left inner div doesn't expand to the size of the parent container. All I want is to have a main div container, and two divs within. One on the left and one on the right.
Both inner divs should expand to the full height of the main div.

But, if I do it one way it will only work in IE, I want it to also work in mozilla...

Anything you can advise me on at this point would be fantastic!

02-10-2004, 11:28 AM
Mmmm.. Try starting with a layout example (http://www.pmob.co.uk/temp/3colfixedtest_4.htm) , deconstruct it, and see why it works :)
The one I provided does a fair bit more than you required, but should be easy enough to srtip back.

02-10-2004, 12:47 PM
thank you.
I'll check out the example, I've saved a copy so it's up to you if you wanna keep it up. :)

I'll see what makes your example tick..
Then I'll break it :D

04-10-2004, 03:18 PM
this is a little late:

wrap a div around both left and right floaters, then set the actual width of wrap div + height:auto, overflow:hidden, this is also where you change the bg color (you can color the floaters bg, but if they are side by side and one has more content it will break to reveal the bg of wrap).

04-11-2004, 02:36 AM
Hang about. I have just been working on a site similarly laid out. One top div the width of the window and below that two divs vertically sized and sitting side by side. Below both of these is the footer div. Just about the only difference is that below the top div, I have a menu line, which can easily be removed and in the centre is a centre div, which if removed makes no difference to the vertical divs. I'l look out the two files (html and css) and zip them for you. Since its nearly 2am here, I'll try to do it tomorrow - or later today as it is now Sunday.


04-11-2004, 08:17 AM
* fixed width/centered

i just made this for an employee:


it shows what i meant by using height:auto, overflow: hidden.

i kept the css in the file. works in mozzila/ie.

04-11-2004, 06:05 PM
Well if mine is any use, use it :)


You will notice that the centre div (the form part), isnt displaying centered as it should and, as it does with IE.

The rest does pretty much what you ask for, I think. There is more in thempage than it sounds like you need so just remove the excess. It should be easily identifiable.

Specifically - the more text on the left and right divs, the longer they become and push downwards, the footer div (which I have called bottomdiv).