I'm trying to add a bit more to my minuscule knowledge of css and I'm currently working on positioning/layout with css as opposed to using tables. Here's what I'm after:



Were the content in the left and right panes in the middle are dynamic in length and the footer should come below the one that reaches the lowest point. I've tried various positions (absolute, etc.) but nothing seems to work out. The footer will either end up in a random location that overlays the middle area or will be entirely self-contained in the middle-right pane.

I've bee to a few css reference sites. Mostly it's trial and error with an emphasis on the error. Any tips, suggestions?

1/28/2010 6:08:19 PM

^ Last I checked, that was an unsolvable problem.

1/28/2010 6:10:14 PM

Hmm. Maybe I'm trying to bite off too much. I wanted to see just how much I could accomplish with next to no html.

1/28/2010 6:29:48 PM

thats quite easy to do in CSS...let me see if i can break it down.

First thing you want to do is have a div thats position:absolute with a width:100% and height:100%. Set the background to whatever you want the background to be of the middle content panes. (This is not where your content goes btw).

next create your header div. Header div will just be position:relative width:100% height:whatever float:left; z-index:1; background:color;

then comes your content panes. Create the left one. position:relative; width:25% (or whatever you want px or %), height:auto; float:left; z-index:1;

then the 2nd content pane. position:relative; width:75% (or whatever you want px or %) height:auto; float:left; margin-bottom:height of your footer, z-index:1;

then create your footer which would have the properties position:absolute; bottom:0; width:100%; z-index:1; background:color;

This will give you the end result you are looking for.

If I'm not making sense I can setup a quick demo for you.

[Edited on January 28, 2010 at 6:32 PM. Reason : .]

1/28/2010 6:30:49 PM

I'm not sure if I understand the question. Do you just want a 2 column layout with a header and a footer?

1/28/2010 6:39:24 PM

^yes but the content has to scale to fill the window...at least thats what i got out of it.

1/28/2010 6:40:48 PM

^^^Thanks. I'll give that a shot. May be a few days before I get the time though.

1/28/2010 6:52:24 PM

Golovko don't you want the 2nd pane to float:right? won't float:left put it below the 1st pane?

1/28/2010 6:55:21 PM

^their widths will equal 100% or he would set their widths to not exceed the allowed width of his layout in pixels if its a fixed width layout.. You could use float:right if the widths would be less than 100% of the allowed space which would leave you with a contentless gap between the two.

[Edited on January 28, 2010 at 6:59 PM. Reason : asdf]

1/28/2010 6:59:23 PM

ah yes, i've been stuck in fixed width land too long using pixels instead of percentages.

1/28/2010 7:01:20 PM

tons of ways to do this. can take CSS from any of these pages
http://layouts.ironmyers.com/
http://www.ssi-developer.net/main/templates/
http://blog.html.it/layoutgala/
http://developer.yahoo.com/yui/grids/builder/

1/28/2010 7:59:51 PM

When you do the footer, make sure you do a clear:both to get it under the floating elements.

1/30/2010 1:50:39 AM

stop writing css. use a higher-level layout library.

1/30/2010 1:59:02 AM

No

1/30/2010 2:39:11 PM