The CSS Anthology: 101 Essential Tips, Tricks & Hacks-P20:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | CSS Positioning and Layout 357 How do I add a footer to a liquid layout If you ve experimented at all with absolute positioning you may have begun to suspect that an absolutely positioned layout will make it impossible to add a footer that will always stay beneath all three columns no matter which is the longest. Well you d be right To add a footer to our three-column layout we ll need to use a floated layout. A floated liquid layout presents an additional problem in contrast to the standard floated fixed-width layout. When we float an element in our layout we need to give it a width. Now in a fixed-width layout we know what the actual width of each column is so we can float each column and give it a width. In a liquid layout such as the one we saw in How do I create a three-column CSS layout we have two columns whose widths we know the sidebars and one unknown the main content area which expands to fill the space. Solution In order to solve the problem of needing to have a flexible column in a floated layout we need to build a slightly more complex layout using negative margins to create space for a fixed-width column in a flexible content area. We ll also need to add some markup to our layout in order to give us some elements to float chapter09 DOCTYPE html PUBLIC - W3C DTD XHTML Strict EN http TR xhtml1 DTD html xmlns http 1999 xhtml lang en-US head title Recipe for Success title meta http-equiv content-type content text html charset utf-8 link rel stylesheet type text css href head body div id wrapper div id content div id side1 form method post action id searchform h3 label for keys Search the Recipes label h3 Download at 358 The CSS Anthology div input type text name keys id keys class txt br input type submit name Submit value Submit div form ul li a href About Us a li li a href Recipes a li li a href Articles a li li a href Buy Online a li li a href Contact Us a li ul div .
