Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Coming back around to CSS positioning

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



4:51 am on Jun 12, 2002 (gmt 0)

10+ Year Member

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?



5:27 am on Jun 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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.


5:56 am on Jun 12, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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



3:57 pm on Jun 12, 2002 (gmt 0)

10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month