Question

I’m coding my first liquid layout and I have to say it’s a lot more time-intensive than a fixed width layout. However, I see the advantages and so I’d like to make it work!

Here’s my situation:

• I have a header with some text in that makes the header of variable height depending on the browser text size.
• I have a fixed-width nav on the left. The nav is floated left and has a negative margin the same number of pixels as the width which effectively makes it slot into a zero-width space. Neat!
• I have my main content section which is floated right. It has a left margin the width of the nav so the content avoids hiding underneath the links of the nav.
• The nav comes second in the source so the users of assistive tech get to the content first.

This works great but only if the content of the main content section has lines of text that wrap around the full width of the page. If the content in only short lines or a list the content section’s width is the same as the content within it. As the content section is floated right it means the content looks wrong in these situations. Obviously the page width is variable and so for larger monitors this problem is more common.

I’m looking for a way of showing the content section filling the page at all times so that the content will sit on the left and fill out to the right even when the lines are short. I’ve tried absolute positioning but that messes up the footer which stays in the right place by clearing the floated nav and content section.

Any suggestions would be really useful!

Edit:

As requested I’ve provided some demo pages.

Here is a page which has wide content and looks OK: http://www.qkschool.org.uk/static/redesign/widepage.html

And here is a page with thin content which is all right-aligned because of the float: http://www.qkschool.org.uk/static/redesign/thinpage.html

Many thanks!

Answer 1

This has always been a favorite source of mine for liquid layouts:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

(Make sure to click around for all the different variations)

I’m not saying you should abandon learning yourself, but I think it’s worth a look at some of the tricks used in those layouts. All of them work great in IE6 and IE7 as well, and use good content-first source order. They can be easily turned into fixed-width if needed. I honestly have never found another layout that I like as much as the ones posted on this website.

One variation I use with these layouts is wrapping every column with an extra inner div, and setting the margin or padding on this div and nothing else, this will make the width and positioning calculations a lot simpler (you’ll see if you check it out). I also wrap the entire thing in a div for easier max-width and centering.

Good luck and let me know if you need any advice with this technique, I’ve been using it for years and it has served me well.