homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Coming back around to CSS positioning
Liquid layout, multiple columns, and... a footer?

10+ Year Member

Msg#: 196 posted 4:51 am on Jun 12, 2002 (gmt 0)

A year ago I rejected CSS positioning in favor of tables, partly because my logs showed Netscape 4.x was too common and partly because the layout was constrained by what CSS-P allowed. For example, I wanted a layout like:

s¦liquid >
d¦liquid >

...but I couldn't solve the footer problem. However, just today I saw a link in 2 different threads to a site that appears to have the liquid footer positioning solved. I suspect this is a kluge, but it has me interested in taking a second look. Anyone here crack this nut?




WebmasterWorld Senior Member 10+ Year Member

Msg#: 196 posted 5:27 am on Jun 12, 2002 (gmt 0)

Hello Bentler,

There are multiple means of tackling the "footer" issue, most are dependant on how your initial layout is conceived. Not many designers begin a layout from the bottom up, so the footer usually comes last in the design scheme.

The example you reference has a footer, or #tail in this case, that follows in the content div in normal page flow. Even though a float has been assigned to the <div id="tail">I'm a footer!</div> the code appears after the the "unpositioned" content div and renders similarly. One of the tricks, if you will, is to use normal page flow to render the footer where it belongs... at the foot of the document.

Also keep in mind that the example referenced uses the @import rule to exclude all styles from NN4 and other older browsers.

If you've read the previous threads, you will see similar approaches.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 196 posted 5:56 am on Jun 12, 2002 (gmt 0)

#tail {
float : left;
margin : 15px 0 0;
padding : 15px 0;
background : #fff;
border-top : 1px solid #ccc;
text-align : center;
width : 100%;
voice-family : "\"}\"";
voice-family : inherit;
width : 100%;
html > body #tail {
width : 100%;

We can find out what's going on with the width redunduncy, and the html > body #tail here...Although it's not making too much sense at this hour:)

[thenoodleincident.com ]



10+ Year Member

Msg#: 196 posted 3:57 pm on Jun 12, 2002 (gmt 0)

Thanks Papabaer and Madcat. I couldn't get my similar layout to work cross-browser when I last tried it- the best I could reliably do was position the footer at the bottom of a single column, not how I wanted it. This is the first CSS-positioned layout I've come across that employs a footer spanning multiple columns in a variable-width layout.

The IE5 workarounds don't make sense to me yet either but are worth some tests - I suspect one or more of them, along with the @import NN4 snub, is what enables the style.

Papa--I'm looking at the footer because I'm evolving an old site rather than designing a new one from scratch. The old site uses a footer spanning multiple columns. The transition will be piecemeal and I want updates to match the old classic.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved