CSS layout

I’ve been playing with the CSS layout again (as you can probably tell). But I’m finding browser bugs very frustrating… Basically, I’ve discovered that I do not know enough to work around them to the point where I can completely separate layout from content.

The sidebar (its called newsbar in my HTML and CSS) is in the footer Blosxom component so it arrives at the end of the HTML. In my previous layout, the newsbar and the copy were floated left and right respectively. This worked fine as long as there was a gap between them. When I tried to butt them together, I ran into issues getting IE to render the way I wanted.

Inknoise has a very cool tool for generating CSS layout and using it I can get the layout I want with the newsbar down the left hand side. Unfortunately the newsbar renders at the bottom of the page after the story content. I’ve tried playing with absolute positioning, but again I run into browser inconstancies. The only way I’ve managed to get it to work is to move the newsbar content to the Blosxom header component so it occurs before the story content. Not a big deal really, it would only mean editing a couple Blosxom components… but its the principle of the thing. I thought that CSS meant I wouldn’t have to muck with my content to get my layout to work.

Damn real-world implementations!

Sigh… So for the time being, this is the layout I’m going to stick with (until I redesign again). I’m not sure whether I like it or not, I’ll have to wait to see whether it grows on me..

2 thoughts on “CSS layout

  1. I need some help with the Asktheseguys wordpress theme..
    I can't figure out how to get the header and ad bar at the top to go all the way across the screen.. Or better yet, how I can place an ad box in the empty space at the top right.
    I can usually figure this stuff out easily, but can't find anything in the CSS that will make it work..
    Anyone have any ideas?

  2. I’m not sure I can help you Roy. I extensively customized my WP templates when I migrated from Blosxom back in the day. Without investigating your existing template and css, I’d probably guess that the width of your banner is being constrained by a containing div or container element. Fixing that may require re-jigging your template.

Comments are closed.