Glider
"In het verleden behaalde resultaten bieden geen garanties voor de toekomst"
About this blog

These are the ramblings of Matthijs Kooijman, concerning the software he hacks on, hobbies he has and occasionally his personal life.

Most content on this site is licensed under the WTFPL, version 2 (details).

Questions? Praise? Blame? Feel free to contact me.

My old blog (pre-2006) is also still available.

Sun Mon Tue Wed Thu Fri Sat
10
       
Powered by Blosxom &Perl onion
(With plugins: config, extensionless, hide, tagging, Markdown, macros, breadcrumbs, calendar, directorybrowse, entries_index, feedback, flavourdir, include, interpolate_fancy, listplugins, menu, pagetype, preview, seemore, storynum, storytitle, writeback_recent, moreentries)
Valid XHTML 1.0 Strict & CSS
/ Blog / Blog
Full width layout

As you might have noticed, my blog is no longer layouted at a fixed width of 800 pixels, but stretches to fill the entire width of the page. I had meant to do this a long time ago, but I just could not get it to work with CSS alone, the only way to do it that I saw was using tables. Since I dislike tables for layouting, I made the width fixed.

Yesterday, somebody on IRC said it was perfectly possible using CSS and pointed out how. His suggestion did not work, though the idea behind it was good (Make the left bar a float, and to prevent the right bar from flowing below the left bar, give it a very wide margin, so the float will stay in the margin). I did some more digging in the CSS 2.1 spec and found a part about block formatting contexts.

From this section (and a number of others) I concluded that if the right bar (with the posts) would start a new block formatting context, it would be properly shortened to fit besides the left bar and I could use floats and the clear property inside the bar without interfering with the float(s) outside the bar.

So, I tricked Firefox into giving me a new block formatting context by setting overflow: none on the bar. This did not really work for IE, I needed to set float: left to make it work on IE. Of course, this breaks on Firefox for reasons I do not fully understand. So, I used the html>body part of the IE box model hack to make Firefox forget about the float part again...

Now my CSS is ugly, but it works!

 
0 comments -:- permalink -:- 09:57
Copyright by Matthijs Kooijman