Post Archive
› November 17, 2005
CSS Layout Challenge
In recent times CSS layouts have made a big step forward with gems like Ryan Brill's negative margins technique, Alex Robinson's Any Order Columns and Eric Meyer's Multi-unit Any Order Colums.
Experimenting with layouts, I wanted to develop a three colum liquid layout with the center column fixed-width and the side two fluid. A quite unusual layout, which I don't think will be used very often, but a good CSS excercise.
So I came up with this page which uses two additional containers for the side columns and has a very simple CSS.
Here's the basic markup for the three columns:
<div id="wrapside1">
<div id="side1">Side column</div>
</div>
<div id="content">Center column</div>
<div id="wrapside2">
<div id="side2">Side column</div>
</div>
Despite the premised difficulties in getting such an unconventional layout, in fact I easily came up with a very clean CSS thanks to the additional containers in the markup and negative margins. Here are the main CSS rules:
div#wrapside1{float: left;width: 50%;margin-left: -200px}
div#side1{margin-left: 200px}
div#content{float: left;width: 400px}
div#wrapside2{float: right;width: 49.9%;margin-left: -200px}
div#side2{margin-left: 200px}
div#footer{clear: both;width: 100%}
The result is a robust layout that doesn't use hacks nor workaround and with a very good compatibility: it's been tested with success on IE5.x, IE6, Opera, Mozilla and Safari.
The challenge
Being curious by nature, I always like to find new, different or simpler way to make things. So my next question was: it is possible to get a similar layout having the center column first in the source? And finally I thought it would be a good question for a challenge. So here are the rules.
The layout of the challenge is:
- a liquid three columns layout with header and footer
- the center column with fixed width (say, for example 400 pixels)
- the center column (for content) should be the first in the source
- the side columns are liquids and have the same width
- any of the columns could be the longest
- both HTML and CSS valid
- good cross-browsers compatibility
If you came with a layout that meets the specs above, just submit a link to your work via a comment to this post. Have good fun with CSS layouts!
Comments
1. November 17, 2005 01:47 PM
2. November 17, 2005 02:16 PM
Jonathan Snook Posted…
Mike: it's close in IE6. Looks like a rounding error causes the third column to drop. It's still in a third column position, but it's further down on the page (cuz it's now "under" the "first" column (second in the source)).
3. November 17, 2005 02:54 PM
Ken Posted…
There was a good example of this over at positioniseverything.net called the Jello-Mold Layout
4. November 17, 2005 04:05 PM
chris Posted…
That's a great way of doing a 3 colum layout. Take a look at the test that was done at Allthatscool.com featuring:
* Standard look (3 columns, 1 header, 1 footer)
* Center content is fluid for usability
* Side columns are fixed width for stability
* Whole layout supports min/max width (375px to 590px = can edit this)
* Source ordered to allow content to show well in search engines
* All columns will stretch vertically
* Every area is tilable with graphics
* Can be easily tweaked to make a fluid graphic frame
5. November 18, 2005 03:48 AM
6. November 18, 2005 10:48 PM
Marko Petkovic Posted…
I am entering this chalange and will try something if I find time
7. November 19, 2005 11:09 AM
kevadamson Posted…
Is this the kinda thing you mean? ...
Nursery Link
And in development ...
Nursery Link Development
8. November 19, 2005 11:58 AM
Alessandro Fulciniti Posted…
Mike, as Johnathan told, probably there's a rounding error on IE. Beside, having the center column absolutely positioned, if you put a footer you couldn't get any of the columns as the longest.
Chris and Kev, the layout you submitted doesn't satisfy the rules... btw nice works.
Heiko, thanks for the compliments for the example. I suspect isn't that easy to get the layout of the challenge having the center column first in the source. The only thing I'm nearly sure of is that extra containers apart from the three for the columns are needed. I didn't try yet... but I feel the challenge is quite tricky.
9. November 19, 2005 02:47 PM
Andy Cox Posted…
This is my solution: http://www.eyetrap.co.uk/challenge.html
I've only got a Mac to hand so no IE testing - but it appears to be fine in safari & firefox/mac.
Interesting challenge, by the way :-)
10. November 19, 2005 03:13 PM
Alessandro Fulciniti Posted…
Andy, your take works even on Opera 8.5... but unfortunately no success on IE6: of the center column, only the left half is displayed. Footer is broken and the right column on certain browser widths shift down.
11. November 19, 2005 03:23 PM
gerben Posted…
@Andy CoxYour sollution doesn't appear correct in IE(6)
the right half of #content isn't visible.
furthermore the background-color of #footer expands up to the bottom of #rightwrap.
12. November 19, 2005 05:54 PM
13. November 20, 2005 09:23 AM
Veracon Posted…
Thought I had it, but try adding content to the right side container. :/
14. November 20, 2005 12:56 PM
gerben Posted…
@ Veracon:
just add margin-right: -210px; to #side2 and remove left-margin from #side2 p does fix it
the only problem is that you can't add a footer, which is a requirement
15. November 20, 2005 02:07 PM
gerben Posted…
here is my sollution. Seems works in FF 1.0.7 OP8 IE5.5 and IE6. Code could maybe be cleaner, but since it's just a prove of concept I don't bother yet.
FF seems to have a problem when increasing the size of the left column but that just a JS problem.
I just noticed FF has a hor. scrollbar
IE seems to suffer from some rounding errors
16. November 20, 2005 02:17 PM
gerben Posted…
see above#rightwrap {
...
width: 49.9%;
...
solves IE's problem
html {
padding-right: 200px;
margin-right: -200px;
}seem to solve FF's problem with scrollbar, but OP8 still shows hor. scrollbar
17. November 20, 2005 02:41 PM
Andy Cox Posted…
Here's yet another solution.
I've tested in IE6, firefox & safari. The only issue i've found is a slight rounding error on the right hand side of the right column...
18. November 20, 2005 04:23 PM
19. November 20, 2005 04:53 PM
gerben Posted…
next try
Most problems solved. Working on IE5.5 , IE6 , FF1.0.7 , OP7.23 , OP8.
The only problem is that in OP links on the left half of #content aren't clickable anymore.
20. November 21, 2005 06:56 PM
Hein Tore Tønnesen Posted…
gerben: The links work fine in the latest preview version of Opera for mac.
Lovely layout, by the way. I might use it for my next project.
21. April 26, 2006 01:59 AM
yi3artist Posted…
I am very happy to have found this article, as I believe it can accomplish what I need to do. But sadly I don't enough experience with floats (nor negative margins) to cater this example to my needs. If someone could lend a hand, that would be great:
In a frame that is 200px wide (already accomplished :P), I want the following: left liquid div, center dix fixed at 5px (or 10px), right liquid div. This might be an easy alteration, but I just don't have the skills.
Mike Rumble Posted…
Give this a try: HTML:<div id="content">Center column</div> <div id="wrapside1"> <div id="side1">Side column</div> </div> <div id="wrapside2"> <div id="side2">Side column</div> </div>CSS:#content { position: absolute; left: 50%; margin-left: -200px; top: 0; width: 400px; } #wrapside1 { float: left; width: 50%; } #wrapside2 { float: right; width: 50%; } #side1 { margin-right: 200px; } #side2 { margin-left: 200px; }I've tested it in Firefox and Safari and things are A-OK. Don't have a PC to hand and IE knowing my luck IE will choke on it - story of my life. Have a look at the layout in action here.