Question

I am stuck on a css layout for a site I’m working on. It is a reports tool, and will be used on both wide screen monitors and netbooks. The site is done, except for a stylesheet which can degrade nicely from the (very) widescreen format to a narrow (netbook) format.

This is how it should appear on a wide screen:
http://s1.postimage.org/1d67kaxdw/pageverywide.png

And for a narrow screen:
http://s1.postimage.org/1d65wrkw4/pagenarrow.png

I’d like it to degrade into the right one in the narrow pic, but I think the left one will be more doable.

I know I can do a conditional css load depending on the screen size, but I would like it to just be one stylesheet. The core of the problem is that I want the right (graph) content to be vertical and centered on it’s part of the page when wide, but then centered and horizontal above/below the table when there is no space for it to be displayed. Vertical scrolling is okay. The table with the red sides is of dynamic height, which has also been a problem.

I have a layout which centers the right graph data as described, but cannot figure out how to force it horizontal from vertical or vice versa. How can I use a single css sheet to accomplish this?

Answer 1

I know I can do a conditional css load
depending on the screen size, but I
would like it to just be one
stylesheet.

What you can do is look into media queries, a new feature introduced in CSS3. They allow you to specific a set of certain rules depending on the screen size, 1 file and no javascript.

Here is an example

@media screen and (max-width: 600px) {
    .graphs{
       /* change position */
    }
}