Liquid layouts: Can a float with a margin be forced to be 100% width?

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.

Answer 2

Here is summary of my own layout technique which is in use on many sites, it can take any number of columns, but this sample just copes with your left one :

JSFiddle example

the sample shows the footer will always remain below longest column

the sidebar can be any width just change the margin of the content to suit, you can even float two sidebars to the left - then just increase the margin on the #content to clear them.

Alternatively (or as well) the sidebar (or 2) can be floated right, then you just margin the #content div on right instead of the left to "clear" them

This is source ordered, content before sidebars.. it can incorporate any number of headers subheadings and footers (or under content) without affecting the main "columns" area, and you can float your sidebars (if more than one), in any order too.. thus changing their order, width, number even after the fact, via CSS alone

I think my layout technique may have even been incorporated into some Drupal themes and is in use, it's certainly been used on some larger sites too, but I lost track.. it's never let me down anyway :)

here's the template code..

CSS:

html, body {padding: 0; margin: 0;}

#footer,#header {background: #444; color: #fff; clear: both;}

#container { /* always the same don't add anything here */
overflow: hidden;
width: 100%;
}

#contentwrap {/* always the same do not add anything else here */
float: left;
width: 100%;
margin-right: -100%;
}

#content {
margin-left: 270px; /* same as width plus padding of the sidebar(s) and in the same direction(s) */
padding: 20px;
border-left: 1px solid #444;
}

#sidebar {
float: left;
width: 230px;
padding: 20px;
background: #dad;
border-right: 1px solid #444;
}

HTML:

<div id="header">header</div>
<div id="container">
<div id="contentwrap">
<div id="content">
<h1>Content  remaining width</h1>
<p>add more content here</p>
<h2>Header Level 2</h2>     
</div><!-- content  -->
</div><!-- contentwrap  -->

<div id="sidebar">
<p>short sidebar</p>
<p>add more content here until this gets longer than main and the footer will still stay below</p>
</div>
</div>
<div id="footer">footer</div>

This really is very flexible as sidebars can be fixed width or fluid too, and it will work with ems , %, px.. you name it

yes I'm attached to this code ;)

Edited to add If older IE's (6 did) do give trouble with floats/hovers inside the content area, the #content div may need haslayout set, if so just add zoom: 1; to it in fact in my layouts I still do out of habit!