Code Complete
20041102 Tuesday November 02, 2004

Liquid Layout

Yesterday evening, I thought I would log into the ol' blog from home, and type a few words about the really creepy movie The Grudge that I saw on Sunday night. Unfortunately, when I loaded up the page, the entire sidebar was scrolled off the side of the browser screen. I had taken special care to ensure the page would scale for other view sizes, but I guess somewhere along the way, something broke the very complex table based layout I use. I vowed to fix it as soon as possible.

Long story short (how often does that happen here?), I rewrote my page templates as a two column liquid layout, using CSS for positioning. I used the excellent Floatutorial from Maxdesign to get the basic structure of the page right. Then I inserted the Roller content tags, and voila! A page which scales correctly, and now even displays properly in text-only browsers like lynx! Not to mention that now I don't have to keep a score sheet next to my keyboard for tracking down missing table cell close tags.

Permalink Comments [2]
Comments:

That Floatutorial site is very nice. Thanks for the link. I've used glish.com and A List Apart for good CSS info in the past, but it's nice to see a step-by-step guide. I haven't yet tried to modify my Sun blog to be fluid, but I got it working successfully on an internal page (suds). However, the problem I always run into what users enter in a comment.. it's easy to get improperly nested paragraph tags and the like. I imagine there are some filters out there somewhere to handle this kind of thing. p.s. Not sure if you noticed, but there's a right parenthesis in your URLs in the right-hand column.

Posted by Bryan Donovan on November 02, 2004 at 09:09 PM PST #

The parentheses come from the Roller #showRecentEntries() macro. The bug has been fixed in the latest version of Roller. Blogs.sun.com should be updating to the new version shortly.

Posted by Cory Omand on November 02, 2004 at 09:51 PM PST #

Post a Comment:

Comments are closed for this entry.