Design Update

Ok, so I adjusted things a bit in the CSS to hopefully resolve some issues on monitors set to resolutions less that 1024×768 brought up by several very kind folk in my previous post. Thanks again to everyone who offered feedback.

Did the adjustments I made solve those issues where the right column was sliding underneath the center one? Any other issues?

Also, Kathleen brought up a good question in her assessment:

is there a particular reason (and I’m really asking here — this is an issue about which I am ignorant) why you’ve specified pixel widths for your columns rather than percentages? It seems to me that percentages would scale to whatever monitor/window size…?

At the time, I couldn’t think of a reason, but a quick look at how I set things up in the CSS to get the white borders to line up (the ‘windowpane’ effect) reminded me. In order to set exact spacing (to prevent too little or too much white space), I have to create a pixel width for the two columns, and then set the margins of the center column to those pixel widths.

So, in the (newly adjusted) CSS, my left column is set to 190 pixels and my right to 200 pixels. The center column then has the following style:

margin:0px 200px 0px 190px; /* top right bottom left */

with a border of 2 pixels of white on either side. The actual background of the entire page is the darker gray on the left, while the background image is the lighter gray on the right – an image 250px wide and 1px high of that color, and set to only tile on the y-coordinate (vertical) and positioned top right. That gives me the two-tone background.

Ok, I’m convinced I’ve bored everyone by now … point being, if I didn’t use exact pixels, I wouldn’t be able to control the white (or, in this case, gray) space between the columns. In any case, the center stretches with window expansion, while the two outside columns are set with absolute values.

If someone could figure out how to accomplish the same feat with %, I’m all ears (or, er… eyes).