middle column in css layout doesn't wrap

EDIT: Okay, so I'm at a bit of a loss here. Actually, at a lot of a loss. I'm seriously considering growing a personal hatred for CSS and its counter-intuitiveness.

So I was trying to make a 3-column layout. It used to be based on the Holy Grail layout, but then I decided I don't need the fluidity or the equal column heights, and began modifying the CSS to better suit my needs.

First, the text in the center column, instead of wrapping, kept stretching the middle column, moving it under the left column. I implemented @ZincX's suggestion of using fixed width columns (see his post below). This fixed the columns, bu开发者_StackOverflow中文版t the containers around them didn't stretch with them. If you open my site (see link below), there's an entire footer hidden behind the header.

Also, I decided to do hierarchic markup - I moved the header to the bottom of the source code, and put it on top with absolute positioning. I'll probably do this with the left navigation column as soon as I get this sorted out. For those unfamiliar with the practice, I only learned about it the other day, too - putting your important content on the top of the page makes it a bit more search engine-friendly.

So how can this huge mess of a layout be fixed? I just want a simple "header, three columns, footer" layout. Is giving absolute positions in pixels even a good practice that displays well in most browsers?

Here's the site I'm working on.

And here's my stylesheet.

---

What you need is a fixed width left column and fixed width right column and a middle column with left and right margin.

The way to do this is as follows:

#col_left {
    display: block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:200px;
}

#col_right {
    display: block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width: 200px;
}
#col_middle {
    display: block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    right:0;
    margin-left:200px;
    margin-right:200px;
}

---

I'm not sure if I'm understanding your question completely, but test out this example code and see if it accomplishes what you are aiming to do (I played with it a lot so there may be parts of the CSS that aren't needed):

CSS:

* { margin:0; padding:0; border:none; }
#header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:75px;
    background-color:#666666;
}

#belowHeader {
    position:absolute;
    top:75px;
    left:0;
    right:0;
    height:auto;
    min-width:604px;
    text-align:center;
}

#colLeft {
    height:auto;
    min-height:100px;
    float:left;
    width:200px;
    background-color:#888888;
}
#colMiddle {
    height:auto;
    min-height:150px;
    width:200px;
    display:inline-block;
    background-color:#999999;
}
#colRight {
    float:right;
    height:auto;
    min-height:100px;
    width:200px;
    background-color:#888888;
}

#footer {
    position:absolute;
    bottom:-75px;
    left:0;
    right:0;
    height:75px;
    background-color:#666666;
}

HTML Body:

<div id="header"></div>
<div id="belowHeader">
    <div id="colLeft"></div>
    <div id="colMiddle"></div>
    <div id="colRight"></div>
    <div id="footer"></div>
</div>

I'm pretty sure the min-width and min-height properties wont work on IE6, but it's a start. If you aren't afraid of breaking IE6 or 7, you could use display:table and display:table-cell instead of using actual tables.

---

I have successfully converted Soh Tanaka's Layout into a 3-column one. It's not perfect - it seems that, with CSS, nothing can be - but it's a start.

My version is a bit of a mess, but it's can easily be a start for someone trying to do this sort of thing. And here's a version with the left/right columns swapped.

Mind the DOCTYPE - if it's HTML 4.01, it might need to be changed to XHTML Transitional; otherwise, the layout might not work in IE. Or perhaps it might.