Why I hate CSS

I was fiddling with the site's formatting yesterday, trying to better utilize available display space by using relative sizing for the sidebar and main column. Unfortunately, on larger displays (and still noticeable on smaller ones) there is this huge space on the left-hand side.

Small screenshot of the site

I have not been able to figure out what is causing it. I've tried adjusting the padding and margins on all of the relative <div> blocks and even tried using the Aardvark Firefox extension to figure it out. What it is probably going to take is to replace to fancy CSS styling of the <div> blocks with old-fashioned HTML tables.

6 Comments »

  1. Brian said,

    January 8, 2008 @ 8:52 pm

    Taking a guess here… The width of the side-bar looks like it’s fixed at 12em? That’s relative to font size, but not page width.

  2. washburn said,

    January 8, 2008 @ 8:59 pm

    Okay, I see what you mean. Yes, I fixed the sidebar so that it would not get ridiculously wide. I guess that does account for it. Unfortunately, if I make the main column take up a larger percentage of the screen it will force the sidebar to the bottom on smaller displays rather than just taking up less space itself. Grr.

  3. Brian said,

    January 9, 2008 @ 5:55 am

    Well, as far as I can tell, CSS stinks for multi-column layouts. I’m under the impression that there is a standard hack to get a two column layout to work, and it requires that one of the columns be a fixed width. I’ve only seen examples that fix the width in terms of pixels, but possibly it might work if you use another unit of measure.

  4. washburn said,

    January 10, 2008 @ 3:05 pm

    Yes, I suppose two column layout is a pretty common design, so theoretically I should be able to figure something out by looking at existing sites.

  5. Liz said,

    October 25, 2009 @ 6:45 am

    Dont use em for the width of the side-bar.

  6. washburn said,

    October 25, 2009 @ 6:52 am

    @Liz: And what would I use instead? The idea is to not use pixel sizing, which will fail to correctly layout on some displays, but using percentages also gave very poor results.

RSS feed for comments on this post · TrackBack URI

Leave a Comment