Topic: 3 Columns - An Alternative (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24435" title="Pages that link to Topic: 3 Columns - An Alternative (Page 1 of 1)" rel="nofollow" >Topic: 3 Columns - An Alternative <span class="small">(Page 1 of 1)</span>\$

mobrul Bipolar (III) Inmate From: Insane since: Aug 2000	posted 12-17-2004 18:37 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	posted 12-17-2004 19:21 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	posted 12-18-2004 01:33 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	posted 12-18-2004 18:32 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	posted 12-18-2004 22:49 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

Topic: 3 Columns - An Alternative (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24435" title="Pages that link to Topic: 3 Columns - An Alternative (Page 1 of 1)" rel="nofollow" >Topic: 3 Columns - An Alternative <span class="small">(Page 1 of 1)</span>\$

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

posted 12-17-2004 18:37

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

posted 12-17-2004 19:21

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

posted 12-18-2004 01:33

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

posted 12-18-2004 18:32

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

posted 12-18-2004 22:49

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:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: 3 Columns - An Alternative (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: 3 Columns - An Alternative (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24435" title="Pages that link to Topic: 3 Columns - An Alternative (Page 1 of 1)" rel="nofollow" >Topic: 3 Columns - An Alternative <span class="small">(Page 1 of 1)</span>\$