Stretch columns to 100%

Forum Moderators: not2easy

Message Too Old, No Replies

Stretch columns to 100%

gavinmcnamee

6:29 pm on Jan 24, 2007 (gmt 0)

Can anyone give me a clue as to how make two colums strecth 100% between the header and the footer in a css layout?

Fotiman

7:27 pm on Jan 24, 2007 (gmt 0)

You might try using the Yahoo UI Library's Grid Layout [developer.yahoo.com].

Alternatively, you could try searching Webmaster World for 'Faux Columns' [google.com].

Alternatively, you could try searching for 'one true layout' at Position Is Everything (can't post the URL here).

My suggestion would be the Yahoo UI Library.

mep00

9:45 pm on Jan 24, 2007 (gmt 0)

Yahoo UI Library's Grid Layout

I just took a look at it and almost got sick. It uses so many extra divs that it's almost as bad as tables. The following is all markup you need for the layout:


<body>
 <div id="header"></div>
 <div id="content">
  <div id="col1"></div>
  <div id="col2"></div>
 </div>
 <div id="footer"></div>
</body>

The relevent css is:


#content {
  overflow: hidden;
}
#col1, #col2 {
  padding-bottom: 20000px; 
  margin-bottom: -20000px;
}

Obviously, you'll need more css than that (i.e., floating the columns), but what you see is the what extends the columns' background to equal height no matter which is taller. For more details see [positioniseverything.net ]'s article In search of the One True Layout [positioniseverything.net]."

Fotiman

10:05 pm on Jan 24, 2007 (gmt 0)

Yahoo UI Library's Grid Layout

I just took a look at it and almost got sick. It uses so many extra divs that it's almost as bad as tables.

Uh... ok. There really aren't all THAT many extra divs if you're only doing a 2 column layout. Before you throw up, take a breath and try reading over it a little closer. It is a platform... it is flexible and will allow you to easily add/remove/nest columns. There are other advantages that it offers as well, like Source-Order Independence. You don't get any of that with the example you gave.

The following is all markup you need for the layout:
<body>
<div id="header"></div>
<div id="content">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
</body>
The relevent css is:
#content {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 20000px;
margin-bottom: -20000px;
}
Obviously, you'll need more css than that (i.e., floating the columns), but what you see is the what extends the columns' background to equal height no matter which is taller. For more details see [positioniseverything.net...] article In search of the One True Layout."

Also, be sure to read the section about how this approach can be problematic.
1. Linking to anchors in elements within the containing block
2. Selecting and scrolling in Gecko-derived browsers
3. Printing in Internet Explorer

Clair

4:17 pm on Jan 29, 2007 (gmt 0)

Hi --
I used Fotiman's 20000px -20000px fix for a page with uneven columns and it fixed it in IE7 but in FF2 the page now cuts off the bottom of the longest column.

Any ideas why this should happen. (I used 30000 and -30000 just to make sure.) Only about 200 px are cut off and the page as a whole is probably only about 1100px in height.

Clair

[edited by: Clair at 4:22 pm (utc) on Jan. 29, 2007]

sldesigns

10:00 pm on Jan 29, 2007 (gmt 0)

Fotiman: I'm looking at the yahoo grids link and playing with the code. Can you tell me why the *width for example in all the css styles? I'm assuming it's an ie thing, will this be compatible with IE7? I've not seen that before within a rule.

thanks

Fotiman

10:03 pm on Jan 29, 2007 (gmt 0)

Correct, it is an IE thing, and yes, it is compatible with IE7.