I have worked as a web developer for two years now, and yet I still have not found a satisfactory solution to the problem of table-less layouts. Table-less layouts always end up needlessly complicated or full of CSS and other hacks.

Here is the challenge for you all. I have a very simple table layout with header, left nav, main content, and footer:

• http://brentonboy.com/misc-pages/layouttest.html

I am trying to figure out if there is a way to replace the table with CSS stuff only while meeting all of the following requirements:

1. Must be a simple solution with as few HTML elements as possible.
2. Must look and behave the same as the example table. Thus:
   1. When the content area is taller than the left nav, the blue of the left matches the height of the content exactly, and the footer drops down nicely below.
   2. When the left nav area is taller than the content area, the green of the content area matches the height of the left nav exactly, and the footer drops down nicely below.
3. The solution uses new HTML and new CSS only... not looking for a javascript solution or something else.
4. Do not make use absolute positioning: in case I need to center it or do some other fluid thing later. Also avoiding relative positioning would be great too.
5. Do not make use of CSS hacks or any other hacks. All code must be valid.
6. Must work flawlessly in every browser, just as the table does.

Basically, I don't think it's possible to meet all of those requirements, which means that layout tables are better. Please prove me wrong!

Table-less layouts always end up needlessly complicated or full of CSS and other hacks.

Only when you still think in tables and then try to build using HTML/CSS.

***sigh***
You must not have learned very much in those two years.

Originally Posted by chrishirst

Only when you still think in tables and then try to build using HTML/CSS.

What else would I try to build in?

Why tables for layout is stupid

Originally Posted by wayfarer07

***sigh***
You must not have learned very much in those two years.

Originally Posted by wayfarer07

Why tables for layout is stupid

I know the reasons. Hence this post.

You have been proven wrong.

CSS

.container {width: 790px;}
.header {height: 100px;   background-color: #C5C;}
.main {width: 100%; background-color: #5CC; overflow: auto;}
.leftnav {width: 250px; float: left;}
.content {width: 540px; float: right; background-color: #5C5;}
.footer {height: 100px;   background-color: #CC5;}

<div class="container">
    <div class="header">
        This is the header.
    </div>
    <div class="main">
        <div class="leftnav">
            This is the Left Nav.
        </div>
        <div class="content">
            This is the Main Content. 
        </div>
    </div>
    <div class="footer">
        This is the footer.
    </div>
</div>

For data, there is nothing wrong with tables. But when it comes to layout...

- Steve

Both columns need to be equal though, or at least appear equal. Faux columns
One of the most annoying things about tables is that you are FORCED to have equal columns, hence all the nasty nested tables which are used to compensate for this. Of course, equal sides is perfect for data, which is why tables work like this.

Must be a simple solution with as few HTML elements as possible.

I think you will find with more complex web sites that CSS allows you to use FAR fewer elements. One of the main concepts is to create classes that dictate your style, rather than using inline HTML to style every last detail of a table and its contents.
Table structure may initially seem like a more straightforward approach and easier to grasp the mechanics, but CSS gives you far more control. I'm no CSS purist. I've used tables when the CSS alternative is ridiculously complex and ridden with various browser bugs, but layouts are not one of those things.

Originally Posted by stevej

You have been proven wrong.

For data, there is nothing wrong with tables. But when it comes to layout...

- Steve

We have a clear winner here!

and here is the visible proof. I only change the footer height.


I use essentially the same thing in a three column version for most of my sites since I quit using tables.

http://www.modtalk.co.uk/_site/demos...al-two-column/

http://www.modtalk.co.uk/_site/demos...-column-image/

Quite honestly, I don't think it matters much. More of a personal preference. In the very long run CSS would be better because it is more likely to be read the same in different browsers than HTML. I still use tables to align certain columns, but hey it's up to you.

Originally Posted by yarrgh

What else would I try to build in?

Nothing else, but you have to adopt a different way of looking at the design when converting it into a page layout.

When you are used to using tables for layout, everything is a cell or group of cells, either vertically or horizontally. For instance: A row of cells would become the header container (or a nested table). The same for navigation, either a column grouping in a row or a single column of grouped rows.
The content container would a group of rows and columns and so on.
So the seemingly natural progression would be continue using the same pattern for CSS styled layouts.

When you decide to move to CSS based layout, you MUST leave that methodology behind you. Thinking in terms of lots of boxes will get you confused and in trouble with cross browser compatibility.

Go back to the principle of "Keeping it simple" and take a holistic approach to the design. Look at the lines of demarcation and how you want the major elements to "flow" away from a left aligned vertical line. It really is a "top down" method of programming.
From there onwards your aim should be to use the minimum amount of markup to achieve the final look.

Originally Posted by johniman7

In the very long run CSS would be better because it is more likely to be read the same in different browsers than HTML. I still use tables to align certain columns, but hey it's up to you.

??

HTML is the structure of the page, CSS is the means of styling the structure.

Web standards - where the ROI is : - http://visitmix.com/Articles/Web-Sta...ere-the-ROI-is