Coming back around to CSS positioning

Liquid layout, multiple columns, and... a footer?

[Bentler]

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:

HEADER---> 
s¦liquid > 
i¦content> 
d¦liquid > 
e¦content> 
FOOTER--->

...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?

[thenoodleincident.com...]

[papabaer]

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.

[madcat]

Hello-

#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 ]

M

[Bentler]

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.