breakthrough

while working on the bobby vomit redesign i finally solved a css layout puzzle that had stumped me for awhile.

this design uses two columns, a primary left column and a narrower right column. using "float", the only way i could get the right column to stay on the right side of the screen was by setting a width for the left column. but i didn't want to set a width: i wanted the left column to fill the rest of the screen (the size of which varies depending on the end user's screen resolution, browser window size, etc).

using html tables you could do this by setting the width to "*", but there is no css equivalent for that function. and setting the css width to "auto" tends to make it fill the screen. so far, i had been settling for setting the left column width to "67%", which was set so that the layout wouldn't break at 800x600 resolutions and would scale out reasonably well at other sizes. but that meant that at higher resolutions, there would be a bunch of empty space at the right side of the screen.

while tinkering with the bobby vomit redesign, which you really should check out (and if you already looked, check again; it might have changed since last you were there), i noticed that if i placed the markup for "rightcolumn" in front of "leftcolumn", i could set its width to 200px without breaking the layout... but this left a bunch of white space in the middle of the screen. still, i was inspired to keep tinkering and researching.

soon i discovered the problem: you can't do that with "float". but by using absolute positioning, settting the right column to {right:0px} and setting the left column to {right:200px;}, i finally got the result i had been dreaming of: a narrow, fixed-width right column with a left column that fills the rest of the width of the screen. and it doesn't matter which one i place first in the markup.

now it's time to implement those changes to my own design! it's always exciting when you track down a bug and something finally works the way you want it to...