CSS Layout Help

I hope that you can help…

I’m struggling to get the following layout to work in CSS.

I would like the design to be fixed width and centred.

I can obviously make it work with tables, (see basic starting point here www [dot] watercoolersdirect.com/redesign/test12.html) but I want to avoid tables, unless others advise to the contrary.

  • Can anyone sugest a way forward with CSS layout?
  • Is a table compromise appropriate in this instance?
  • Would I be better off compormising the design to allow for CSS?

The last thing I want to do is create code that breaks when new browsers come out, any help gratfully recieved.


Don’t see your table

For some reason your image isn’t working. But when you get that settled, there are plenty of good folks around here that are glad to help you.

Is a table compromise appropriate in this instance?

Never, never, never for layout. Tables are still applicable but only for tabular data. When you start making changes to the layout and style, you won’t be sorry you stuck with CSS.

Would I be better off compormising the design to allow for CSS?

Rather than using tables, I would say yes. Chances are, the end user will not be worse off for it anyway.

The last thing I want to do is create code that breaks when new browsers come out, any help gratfully recieved.

The important thing about that is to check your code in the W3 validator: http://validator.w3.org/

Invalid code is what can cause problems, and not setting a proper doctype. Using CSS for layout will not cause future problems. The trend is that browsers are becoming MORE standards compliant not less. And if suddenly a browser vendor decided to commit business suicide and removed standards, everyone who used the browser would notice that the entire internet is broken, and would most likely then blame the browser itself. You are safe using web standards.

The trick when building your site is to test EARLY and OFTEN. Do not test in only your favorite browser, THEN test everywhere else when you are done. In the beginning stages I wear out my cross-browser testing service.

The following shows the table with some other bits as well www.watercoolersdirect.com/redesign/test12.html I have looked but I don’t seem to be able to find code that will aproximate this layout style.

Looks to me that you have a two column layout. Here is a run through: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/


You seem to be thinking in terms of what table layouts have previously confined to and coming up with a boxy table-layout centered design. Try to get away from equal columns and specific table behaviours because that’s the way that sites had to be designed because that’s all tables could do. You can still make interesting and well designed sites in CSS but you don’t have to make every column equalise.

Having said all that you can still make that layout in CSS and if IE8+ support was replied you could use the display:table properties to mimic the table layout design you showed above. If you need to support ie6 and ie7 then you could use the faux column approach to get the equal columns.

This layout uses [URL=“http://www.pmob.co.uk/temp/images/3col950.png”]this image to produce the equal column effect. The image is repeated on the main parent so that all three columns are always painted. You just rub out the background where not needed.

Finally, the best way to design a layout is to start with the html content first rather than doing it the other way around. It is usually the content that dictates how a page should look and how it should all flow together. Once you have content then you can decide how to place it and what the best containers for it would be.

Hi Paul,

I really appreciate the work that you put into this.

As you suggest I will review the content and allow this to dictate the layout and see where this takes me.

Thanks also sdt76.