Lining up columns in CSS

September 18, 2007 9:08 AM

CSS: What's the deal with positioning?

I am slowly setting up a new Wordpress blog, thanks to the generosity of pocams, and I can't get the hang of positioning in CSS. I'm using K2 0.9.6. The blog's here, and as you can see, the sidebars aren't where I'd like them, and the post text inexplicably overshoots the width of the containing div in both IE6 and FF2.

The relevant page structure in the stylesheet is

body.sidebar-dual

div#page
--div#header
--div.content
----div#primary
------div#current-content
------div#dynamic-content
----div#sidebar-main.secondary
----div#sidebar-alt.secondary
p#footer

The relevant positioning attributes:

#page
width: 950px;
margin: 0 auto;
padding: 0px 0px 10px;
position: relative;
border-bottom: 4px;
clear: both;


#primary
display:inline;
left:170px;
padding:5px;
position:relative;
width:560px;

#sidebar-main (right)
border-left:2px;
float:left;
padding:10px;
width:178px;

#sidebar-alt (left)
border-right:2px;
float:left;
padding:10px 5px;
width:158px;

I removed the 'left' and (negative) margins to get a fresh start.

How do I get a regular 3-column here? Thanks.

posted by daksya to Computers & Internet (11 answers total)

Response by poster: And to request something that may be useful for everyone, is there any tool that shows an iterative visualization of the positioning through the course of the rendering flow?
posted by daksya at 9:11 AM on September 18, 2007

One thing I found useful was using the firefox developers toolbar. It used to let you edit CSS on pages and see, in the browser, what would happen, giving a sort of real time view of how the CSS is working.
posted by drezdn at 9:19 AM on September 18, 2007

Get the Firebug plugin for Firefox. Lets you edit your CSS live in the document. Very powerful.

Also, the K2 theme is a complicated one. You're diving into the deep end with that one. You might want to get a static page working that embodies the broader CSS features you want, and then apply them to your theme. But there are so many nested divs in there that you may run into some unexpected dependencies.

It looks like there is nothing in your #sidebar-main style to force it to the right side. The display: inline with commented-out float: left on #primary is, well, unorthodox; the fact that it is un-floated I think is why your right sidebar is moving to the left.
posted by adamrice at 9:29 AM on September 18, 2007

Yeah, Firebug is a big help (the Web Developer toolbar is a similar aid). A couple of links that may help:

In search of the One True Layout
Understanding "Any order columns"

I don't think you want the "display: inline" on your primary column. That turns box elements into not boxes (i.e., they only take up the space that their contents need and don't force a line-break). You only need the "position: relative" if you're positioning other elements inside the element in question. Try taking them off and see if anything changes.

First thing to do is lose the "display: inline" and see if things get any better. You'll want to put "clear: both" on the footer to make sure the sidebars never run over the footer (if they're longer than the #primary column).
posted by yerfatma at 9:39 AM on September 18, 2007

Check out the Blueprint CSS framework, and look at how it works.
posted by chunking express at 9:45 AM on September 18, 2007

"Cascading Style Sheets: Separating Content from Presentation" is an old book, and most of the chapters are terribly bland to read. However, this book is worth it just for the chapter on css positioning. I think it does the best job of describing how positioning works and how to use it. Check it out.
posted by punkrockrat at 10:04 AM on September 18, 2007

I know this is heresy, but...

Just use tables.

CSS positioning is a huge PITA that still doesn't seem to work consistently across browsers.
posted by Artifice_Eternity at 11:21 AM on September 18, 2007

This is the link to one of the style sheets (angled brackets replaced with straight ones):
[link rel="stylesheet" type="text/css" media="screen" href="http://psychotonic.xl0.org/wp-content/themes/K2" /]

It ends with "K2" instead of something like K2.css. If I try to load that URL I get what looks like a PHP error ("Fatal error: Call to undefined function get_header() in /home/daksya/public_html/wp-content/themes/K2/index.php on line 1"). Who knows what the browsers are doing with this.

There are also some errors in the style sheets.

Digital Web has a good recent article on floats. This example looks similar to what you're trying to do.
posted by kirkaracha at 11:30 AM on September 18, 2007

There is a developer toolbar for Internet Explorer similar to those mentioned above. It also allows you to click on an element and make modifications to the CSS to see the results in real time.
posted by Gomez_in_the_South at 12:06 PM on September 18, 2007

the php error is because you're loading a wordpress template outside of the wordpres environment, so its trying to call 'header' information and the variable isn't set.
posted by softlord at 5:50 PM on September 18, 2007

Response by poster: Thanks for the replies.

I already have Firebug. Problem is that it can only rectify the situation for FireFox. Just a few minutes ago, I got the layout working in FF via FB, only to see it all over the place in IE6.


...oops, forgot to submit...

I got it done. That 'inline' is an IE hack, which I found out thanks to one of the links above.
posted by daksya at 12:03 AM on September 19, 2007