3 Columns - An Alternative — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

3 Columns - An Alternative

This page's ID: 24435

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

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	So, I ran into a problem with my latest design. I wanted a page to look like this: [url=http://www.c-e-simpson.com/ozone/mockup.png]mockup[/url] 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 [url=http://www.c-e-simpson.com/ozone/index.html]adequate solution[/url]. ([url=http://www.c-e-simpson.com/ozone/style.css]CSS[/url]) 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. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu