Three column page header using CSS

How do I avoid divs dropping below each other as page size gets too narrow?

[GaryK]

Right now I use CSS for formatting but still use tables for basic layout.

If I can overcome this one problem, without kludges, workarounds and hacks I promise to forget about tables except for tabular data.

I have a page navigation header that's similar to WW. Logo to the left, main navigation in the middle, and important system announcements to the right.

So far, with a parent div and three child divs I cannot overcome one problem where tables seem to me to be superior.

As the user narrows the page width, or increases font size, or whatever affects the screen width, eventually the middle div drops to below the left div. Eventually the same thing happens with the right div; it drops to below the middle div.

The result is that eventually I wind up with these three divs on three "lines" instead of all together. That's the part which is unacceptable to me.

With tables the user would eventually have to horizontally scroll the page. That's the same effect I want to achieve with divs and CSS.

Is this possible within the parameters I specified above about no hacks or other workarounds?

[SuzyUK]

GaryK

I don't know if you have widths specified anywhere in your code, but this is classic case for min-width which surprise surprise is a property not supported by IE :(

There is a workaround somehwere out there for IE min-width.. but as you specified no hacks then I would say it's not for you.. the thing with floats are that they are liquid and will move!

If your side columns have explicit widths you could try the layout without floats.. i.e use margins/padding on the middle column and the absolutely position the left and right columns over the sides.. this should offer a horizontal scroll once the window is narrowed to a point that the center column can no longer narrow any further due to an image or some other non-breakable width element within it.

Otherwise I think everyone is in agreement..
IE support of min-width is at the top of all our wishlists

Suzy

[DaScribbler]

Perhaps go with one Parent div, and only 2 Child divs. The 2 children being the left and right columns (by floating them), and the center column being the entire browser window (the parent). Set the parent's Margins left and right to the width of the 2 children, so any content in the parent will not cross over the children.

Now when somebody resizes their browser, the only effect is the parent content narrowing. You'd have to REALLY narrow the window to get the 2 children to collide.

Does this make any sense?

[killroy]

I'm not sure if this will work, but in my head I'm thinking floated DIVs are like characters in a line of text.. so creating a surounding box and setting it to nowrap might just work...

SN

PS: Doubt it though, as I think this is the classic archilles heel of that CSS method.

[GaryK]

Thanks to everyone for their replies and insight.

SuzyUK, the left and right columns are a fixed width. Can I use absolute positioning as a style on the parent DIV that holds the other three DIVs?

killroy, I tried white-space: nowrap on the parent DIV and, in desperation, on each of the child DIVs as well to no avail.

DaScribbler, I appreciate your comments but I'm not sure you understood my original question. The parent DIV is not the browser window itself but rather a DIV at the top of the browser's page. Or did I misunderstand you? I'm not enough of a CSS expert yet to know if I misunderstood what you were trying to tell me.

Oh how I hate to ask this question and start a holy war but is this legitimately one of the shortcomings of CSS that force some of us to stick with an amalgam of tables and CSS instead of pure CSS?

[DaScribbler]

Aaaah okay, I was the one who misunderstood.

When you said you had a parent div with 3 Children, I took it to mean you had 1 div as a wrapper, and 3 divs inside it making 3 columns.

[SuzyUK]

GaryK

the left and right columns are a fixed width. Can I use absolute positioning as a style on the parent DIV that holds the other three DIVs?

Hi Gary.. not quite, depends on the rest of your layout.. but see my example below which shows how you use absolute positioning within any parent div regardless of where it needs to be on page. I put content before and after the section in question, although you said it was for a header, so you can see the columns are "inside" the parent.

You need to explicitly specify the parent div (in my case "wrapper") as position: relative then it's children if given absolute positioning will position themselves according to parent as opposed to the screen (html or body element)

In this example it's only the left and right columns that are AP'd.. the center content "clears" the columns by having margins equal to or greater than the width of the left/right columns.

Note: :( I discovered yet another IE bug!
(can't believe I never saw this one before!)

An absolute child with the top and left properties set will position itself relative to the left margin/padding of the content instead of the left side of the parent - incorrectly of course!

A workaround: set a width on the parent!

so it's best if your wrapper/parent div has no border, margins or padding as it needs a width specified on it. And if you have a liquid layout it's probably best to use 100% width.

Also remember that this will only work best if the side columns are not longer than the middle one

<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
body {background: yellow;}

#wrapper {
margin: 0;
padding: 0;
border: 0;
background: white;
position: relative;
width: 100%; /* required for IE bug! */
}

#main {background: #ffc; margin: 0 180px; padding:0 20px; border: 1px solid #000;}

#left, #right {position: absolute; background: lime; width: 180px; top: 0;}
#left {left: 0;}
#right {right: 0;}

#left p, #right p {padding: 5px 10px;}

</style>
</head>
<body>
<p>stuff before wrapper/parent</p>

<div id="wrapper">

<div id="main">
<p>main content</p>
<p>and some more</p>
</div>

<div id="left"><p>left content</p></div>
<div id="right"><p>right content</p></div>

</div>

<p>stuff outside the wrapper/parent</p>

</body>

Suzy

[GaryK]

Thanks for some sample code and advice, Suzy. I'll test it out later and let you know how it went.

[GaryK]

Suzy, your code works great in IE; in fact it's absolutely perfect for what I want to do. I was thrilled but unfortunately in Opera 7.23 and Mozilla 1.5 there is about 10px of white space above the text in <div id="main">. I did confirm this white space is within #main and not within #wrapper.

Might you have any thoughts about why this is so?

BTW, just reading how you defined your styles taught me a great deal about CSS. You do things I didn't know were possible and used shorthand that saved a few bytes of code.

For example, I thought that:

#left, #right {position: absolute; background: lime; width: 180px; top: 0;}
#left {left: 0;}
#right {right: 0;}

would cause the original #left and #right definitions to be overwritten, not added to.

[Safir]

Interesting topic...
I just started my first "table less" atempt... *sigh* it sure is a lot easyer by just placing a clean easy to read (code wise) table in the main page template for the positioning of the page.

Should i be ashamed for doing this? As i am very much willing to learn to do everything "the css way" (call it my newyears resolution) i wonder: is it possible to create rather complex pages that work in 95% of currently used browsers without doing hudini worthy tricks?

I always find myself in this scenario: now it works for browser a, not b. I change something, now it works for b and not for a... and eventually i go for the lasy (but fast and supported way) and just position everything within a table, and go the "css way" from there on...

[GaryK]

Hi, Safir. Welcome to WW.

From my limited experience 95% is a bit much to hope for. In just my limited example from the testing I've done of the above code what is easy as can be using a table takes a zillion lines of CSS and doesn't work properly in most of the browsers I've tested it in. Only in IE does it work properly.

So, while I am redoing the site in my profile in XHTML 1.1 I will still be using tables where necessary to ensure the site at least looks halfway decent in older browsers. But I'll be using CSS to do all the formatting and will use DIVs instead of tables whenever possible. But it seems to me, and we've debated this ad nauseum around here (:)) using tables where the look of the site must be consistent across lots of browsers is still a necessity. I wish it weren't and some day a few years from now it won't be. But for now, tables are still something I use for page formatting in addition to tabular data.

[SuzyUK]

I did confirm this white space is within #main and not within #wrapper.

GaryK.. not confirmed or tested, but is it the default margin on the <p> element I have within the main div? ~ try setting #main p {margin: 0;} ~ then if it is that you can reset the spacing required using padding.. something I do by default these days anyway as it is a buggy area in Opera..

Suzy

[dmason]

This looks like it's getting close to a general solution, but I'm just learning CSS, so taking it the rest of the way os beyond me.

What I'd like is to replace:

  <table border="0" width="100%">
<tr><td align="left"><p>left stuff</p></td>
 <td align="center"><p>center stuff</p></td>
 <td align="right"><p>right stuff</p></td></tr>
  </table>

with something vaguely like (this is from SuzyUK's posting, and doesn't do what I want):

.table {
 margin: 0; padding: 0; border: 0; background: white; position: relative;
 width: 100%; /* required for IE bug! */
}
.center {margin: 0 180px; padding:0 20px;}
.left, .right {position: absolute; width: 180px; top: 0;}
.left {left: 0;}
.right {right: 0;}
.left p, .right p {padding: 5px 10px;}

followed by:

  <div class="table">
<div class="center"><p>main content</p><p>and some more</p></div>
<div class="left"><p>left content</p></div>
<div class="right"><p>right content</p></div>
  </div>

but I don't know how to get the variable margins that would make it work.

Thanks ../Dave

[humpo]

Found this which works very well.
h*tp://www.pixy.cz/blogg/clanky/css-3col-layout/

Has header, 3-columns and a footer. Columns can all be variable height. Does drop the middle column if resized too small, and doesnt allow placing of main(middle) content before the other sections which is what i was after.

"No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns. The left and right columns have fixed width (150px), the middle one is elastic. Any (zero or non-zero) margin of the body may be used. It works (AFAIK) in any modern browser - I tested it in IE5/Win95, IE6/WinXP, Opera7/WinXP, IE5/Mac, Mozilla, Safari, and Camino. It won't work in old browsers poorly supporting CSS (like NN4, IE4 etc). "