-----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stevio Sent: Thursday, March 17, 2005 6:08 PM To: Web Standards Group Subject: Re: [WSG] Simple 2 column layout?
Thanks for that, getting those widths right always annoys me cause the box model doesn't work right! To expand on the simple 2 column layout, how can I have a fixed width left column (for navigation) and a right column that fills the rest of the space. This is achieved in tables by setting the left cell to, for example, 150 width, and the right column to 100%. Thanks, Stephen =************************************************** There's a conceptual issue here. The point of styling with css is to get out of the box of one's own monitor and to style for the range of devices available to users. That's users not authors. The only way to do this is to maximize flexibility. This is where the "ease" of tables fails. Set a pixel fixed width for a left cell, let the right cell fill the screen. Now increase the screen resolution. The amount of real estate to fill in the right cell just increased dramatically. Go the other way, keep decreasing the screen width to a cell phone or pda. The screen real estate is gobbled up by the fixed with left cell and the right cell an undecipherable sliver. Start to change font size and it just gets worse. The fixed width left cell disintegrates. The right cell holds coherency longer. Overall, it just doesn't work well. Percentages offer a partial solution. At lower resolutions a percentage based column setup holds up pretty much down to the single word width, a bit longer than may actually be useful. For higher resolutions, the single line column problem doubles with both cells being single lines with the added possibility of a lot of real estate separating the end of one text grouping and the beginning of the other. Font size, however, starts to cause the same kinds of problems. Huge, gigantic letters breaking out all over. Fixing the right cell size only compounds the problem. That leaves em's for sizing. One can set a width for either or both columns which will better withstand resolution and font changes in both directions. The problem is how big is an em? It's really such a flexible measure that it makes people uncomfortable. How many em to a line? What looks good on changes of screen resolution can frankly look a little flakey and shabby on different monitors with the same resolution. It does look slightly odd when the header graphic is off center a tiny bit. This leads to discussions of being a pixel or two off on header positions etc. Although designing for slightly less than viewport maximum will fix most all of that by compacting the design. So you want 2 simple columns? Then make 2 columns. Float both of them. Left or right, determined by whichever content you want to come first in the code. Float them because then they are columns not a float sitting on a wide margined normal flowed element. Fix their width with em to maximize durability and usability. And this is where the box model shines. It's just the sum of seven components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side and up and down, all constrained by the width of the container, if any. Change those factors and one changes the appearance of the columns without compromising the content or the accessibility of the content. And that's the beauty of css for styling. Allows both users and authors to separately control how pretty the picture is; once the authors learn to let trust users. Brilliant design actually. drew ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
