Liquid layouts: can a float with a margin be 100% wide?

Question

I am coding my first fluid layout, and I have to say that it is much longer than a fixed-width layout. However, I see the benefits, and therefore I would like to make it work!

Here is my situation:

• I have a header with some text that makes the header a variable height depending on the size of the browser text.
• I have a fixed nav width on the left. Nav floats to the left and has a negative margin with the same number of pixels as the width, which effectively makes it a slot in a space with zero width. Well maintained!
• I have a section of my main content that floats to the right. It has the left edge of the width of the navigator, so the content allows you to hide navigation under the links.
• Navigator takes the second place in the source, so users of assistive technologies first fall into the content.

This works fine, but only if the content in the main content section contains lines of text that wrap around the entire width of the page. If the content is only in short lines or in a list, the width of the content section is the same as the content inside it. As the content section floats correctly, this means that the content does not look right in these situations. Obviously, page width is variable, so this problem is more common for large monitors.

I'm looking for a way to display a section of content filling a page at any time, so that the content will sit on the left and fill to the right, even if the lines are short. I tried absolute positioning, but that messed up the footer that stays in the right place, clearing the floating navigation and content section.

Any suggestions really helpful!

Edit:

As requested, I have provided some demo pages.

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

And here is a page with subtle content that is aligned to the right because of the float: http://www.qkschool.org.uk/static/redesign/thinpage.html

Many thanks!

Answer 1

This has always been my favorite source for liquid layouts:

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

(Remember to click on all the various options)

I'm not saying that you should give up exploring yourself, but I think it's worth taking a look at some of the tricks used in these layouts. They all work fine in IE6 and IE7, and also use a good source content order. If necessary, they can easily be turned into a fixed width. I honestly never found another layout that I like, as well as those that are posted on this site.

One option I use with these layouts is wrapping each column with an additional inner div and setting the margin or padding in that div and nothing else, this will simplify the calculation of width and positioning (you'll see, you check this). I also wrap the whole thing in a div to simplify maximum width and centering.

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

Answer 2

Here is a summary of my layout method, which is used on many sites, it can take any number of columns, but this example just does your left hand:

JSFiddle example

the sample shows that the footer will always remain below the longest column

the sidebar can be of any width, just changing the edge of the content to fit, you can even swim with the two side panels to the left - then just increase the border by #content to clear them.

Alternatively (or also), the sidebar (or 2) can be placed on the right, then you just put the div #content on the right and not the left to “clear” them.

This is an ordered source, content in front of the sidebars .. it can include any number of headings and sub-headings of headings (or under the content) without affecting the main area of ​​“columns”, and you can swim with your sidebars (if there are several) in any order too ... thus changing its order, width, number even after the fact, only with CSS

I think that my layout technique may have even been included in some Drupal themes and is used, of course, it was also used on some larger sites, but I lost the track .. it never let me down :)

here is 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> 

It is really very flexible since the side panels can also be fixed width or fluid and it will work with ems,%, px .. you name it

yes I am attached to this code;)

Edited to add If the older IE (6) does create problems with float / hovers inside the content area, for the div #content may need to havelayout set, if you just add zoom: 1; to him actually in my layouts, I am still out of habit!

Answer 3

If you think about physics, even liquids have boundaries. When it expands too much, it becomes gas. When it compresses too much, it becomes hard. Borders are also important in web design. I suggest exploring Elastic Design (freely translated into a design that is flexible in certain settings).

Here are some links to get you started:

• List: Elastic Design
• CSS Layouts: Fixed. Liquid. Elastic
• Fixed against Fluid vs. Elastic Layout: Whats Right One For You?

Answer 4

It's hard to say without seeing the design, but 100% of the height and width can be faked using the parent element (for example, using a background on the body or a wrapper div).

If your last paragraph is not critical (I think it's because you mentioned it ...), you can also switch the order of your floats and remove the float from the content.

Answer 5

You can try using the Fluid 960 grid - make it work, and then delete / rename classes to make it more semantic.