Topic: 3 Columns - An Alternative Pages that link to <a href="https://ozoneasylum.com/backlink?for=24435" title="Pages that link to Topic: 3 Columns - An Alternative" rel="nofollow" >Topic: 3 Columns - An Alternative\

 
Author Thread
mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-17-2004 18:37 Edit Quote

So, I ran into a problem with my latest design. I wanted a page to look like this:
mockup
With the navigation on the left to be ~100px wide and with the two columns (the articles and the "shorts") to split the remainder 50/50.

I wondered and wondered how to do this. Finally, I came to what I think is an adequate solution.
(CSS)
I set the body tag to have a left margin of 145px.
The I absolutely positioned the navigation div to fit in that left margin. Since <body> doesn't have a specified position, the absolute positioning is relative to the <html>!

Then, it's a simple matter of floating the remaining divs one way or another, and setting width to be ~50% (must account for rounding errors).
Then clearing the whole mess with the copyright stuff at the bottom.
I'm feeling pretty damn slick right about now.

Now, I post this for 3 reasons.
1) So somebody with a browser/platform/device I don't have can say "hey, moron! it doesn't work on xyz." Then I can either try to fix it or dump the whole idea all together.

2) So somebody else can come along and say "Hey, moron! There's an easier way to do this -- like this..." Then I'll learn something new.

3) Barring someone else coming along for the above 2 mentioned reasons, someone else coming along and saying, "hey, that's kinda cool. why didn't I think of that?"

Anyway, my mockup isn't pretty, but it lays out the divs the way I wanted, in what I think is a workable, doable, and standards compliant way.

Comment, please.

Blaise
Bipolar (III) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 12-17-2004 19:21 Edit Quote

It's really quite good, it may not be alayout that's frequently used but you;ve put it together well, it even resizes nicely, which is something that businesses seem so dependent on nowadays, well done sir!

jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

IP logged posted posted 12-18-2004 01:33 Edit Quote

for other alternatives check out Paul O'B's layout samples:


http://www.pmob.co.uk/temp/3colfixedtest_4.htm


you can get his help here:
http://www.sitepoint.com/forums/forumdisplay.php?f=53

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-18-2004 18:32 Edit Quote

See, the thing about the "traditional" 3-column is that the two flanking columns must have a set width (either in px, em, or %) and the center column takes up the remainder.

I wanted the left column to be a set width, and the other two to split the remainder -- that is, be the same width.
If I would have set the left column to 100px, and the right column to 50%, the center column would not have been the same size as the right column. It would have been 50%-100px.

With a table layout, this would have been simple. Set the width of the first column to 100px, and the other two would have, by default, split the difference. Not so with divs.
This is the/a css solution, and one I'm pretty happy with.

Has anybody found a situation in which this does not work?

Ramasax
Paranoid (IV) Inmate

From: PA, US
Insane since: Feb 2002

IP logged posted posted 12-18-2004 22:49 Edit Quote

All in all, I say well done. I took a few minutes and tested in a few browsers. A few minor glitches, but nothing threatening to the structural integrity.

WinXP SP2:

Mozilla 1.4.1 - ok
Mozilla 1.7 --- ok
Opera 5 ------ Bullets showing up in leftnav (top box ul, bottom box ol)
Opera 7.03 --- ok
Firefox 1.0 --- ok
IE 5.1 --------- Entire background gray
IE 5.5 --------- Entire background gray
IE 6.0 --------- ok
NS 7.2 -------- ok
Lynx 2.8.3 ---- ok

Not sure which browsers you've checked in, so hope this helps.

Ramasax



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu