W3C home > Mailing lists > Public > www-style@w3.org > February 2002

Challenge--what needs to be in css3 to duplicate this table design?

From: Peter Sheerin <pete@petesguide.com>
Date: Sat, 23 Feb 2002 14:38:34 -0800
Message-ID: <004001c1bcba$d6767170$6501a8c0@cadpkslaptop>
To: <www-style@w3.org>
I'm a big fan of style sheets, but I'm getting fed up with the limitations of CSS and the current implementations, so I'd like to propose a little exercise.

I've got a new design that I was trying to make using just CSS, but I've finally given up and gone back to a table layout. There are two or three specific things that I think CSS should be able to do, but either it can't, or I'm just too dense to understand the specs.

I'd like to use this as an example for driving discussions on possible improvements for css3.

Here's the table version of the layout:

http://www.petesguide.com/tests/CClayout/table1.html

What I'd like to be able to do in CSS is have the top banner be fixed to the top of the browser window, so that it is always visible, yet grow in height when the window is narrow enough to wrap the text below the image. I've managed to get close to this with css, but there is no way to position the content below this banner so that it is always relative to the bottom of the banner--I've been forced to resort to either adding extra space to account for however much text may wrap, or simply make the banner a fixed height and let the content be clipped on the right when the window is smaller. What needs to be done in css3 to accomplish this?

For the remaining content, I'd like the sidebar on the left to be a fixed width (to accomodate the images), with the main content on the right to divide the remaining space equally, until the two columns on the right become so narrow that the sidebar really needs to move elsewhere. I have yet to find a combination of width and float combinations that can accomplish this. the closest I've gotten are these two examples, the first of which uses a 2x2 table:

http://www.petesguide.com/tests/CClayout/style1.html
http://www.petesguide.com/tests/CClayout/style2.html

The second uses nothing but divs, but now I loose the ability for the height of adjacent boxes to match.

In both cases, since the main content comes first and has a % width, that is the factor that determines when the left div drops down, not something that would make more sense, such as when the text in the main content drops below a certain width (say 10em). The ability to specify behavior like this would be an immense boon to css3.
Received on Saturday, 23 February 2002 17:39:51 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:13 GMT