Calling all CSS experts

moneyuser

Hi.

I'm not a web designer but I'm starting to make my own website and have just got a slight problem with the layout using DIV's that I need your help with. I've searched and searched but not found an answer.

Have a look at my test site here I want the Main Content DIV to auto expand to match the height of the left menu DIV. With tables this would be easy. I have also seen examples that mix tables and CSS to achieve what I want but I want to use pure CSS

Ta

illmonkey

create a "footer" div.

Then give it the propertys of :-

clear: both;

then insert it onto your page under the menu and content divs.

wolfman

Yeah that's what I've done.

I basically created a "cleaner" div, and put it after both my main content and left navigation div tags. Then just applied the following style to it:

.Cleaner
!!
background-color: Transparent;
clear: both;
height: 0px;
font-size: 1px;
margin: 0px;
padding: 0px;
}

It should work in all recent browsers.

moneyuser

Thanks for the replies but extra div using clear: both doesn't work. I believe that is used so non-IE browser can wrap the container box around the left menu and content areas. In my case I'm using the clearfix class to achieve the same results.

I've added a screenshot on the site so you can see what I want to do. Notice how the colour and border now match the left menu.

wolfman

Ah ok. I'll check what I've done when I get home. You basically want to stretch the content div, or navigation div so they both reach the bottom of the container div.

Could have sworn the above method will do that. I used to have a similar design, I'll check when I get back.

martindow

I'm no expert on this but I think that this can be dealt with using faux columns
http://www.alistapart.com/articles/fauxcolumns/

http://css-discuss.incutio.com/ is also a good resource for css positioning. Good luck.

moneyuser

faux columns looks interesting but I'm not sure if it would work with what I intend to do with the site but thanks anyway.

moneyuser

Ok, bit more searching and I found a rather nifty java script over at Killersites that does exactly what I want.

Just posting this in case someone has the same problem