Head of Runboard staff
Karma: 132 (+147/-15)
(Advanced) Table-less CSS layouts
There are other ways to do this (for example, using negative margins and floats instead of absolute positioning), but currently the link above leads to code for simple one- and two-sidebar, flexible-width layouts. The different sections are color-coded, to show you which CSS code pertains to which HTML.
If you disable style sheets via the link provided on those pages, you will notice that the header show up before any of the sidebar content. Since Google's bots and other spiders always read content in the order they appear in the html, and since they don't always read the entire page, having content before a bunch of announcements and images can greatly improve your search engine rankings. Also, blind people won't have to listen to their screen reader reading off all of that sidebar content every time they load a new page, before it starts reading the page's real content.
Important note for boards that display Google ads:
If you are using a 1024px or wider screen resolution, you should re-size your window (or temporarily change your computer's settings) to see what a layout looks like in an 800px wide resolution. If your sidebars are too wide to fit with the banner, some very strange things can happen with your layout.
For your reference, the Google ads used at Runboard are 728px wide.
Incidentally, this is why I made a fixed-width layout here at Illusia. Although I don't have sidebars, I do use some pretty thick margins on the left and right to account for the columns on each side. Even after the board went premium, I decided to keep the ads visible to non-registered lurkers to save on premium credits, while getting rid of the ads for registered users, so regular members on dialup wouldn't have to wait for the ads to load every time they visit a page.
If you want to make any of the two layouts a fixed width, you can add another div to surround everything else, defining that div's width in px in your CSS, and using margin: 0 auto; to center that div on the page.
4/8/2007, 1:00 am
Link to this post
PM Lesigner Girl