Three column fluid layout

[drewbee]

Hello everyone. I have a basic layout of three columns, the middle is fluid and the left and right columns are static.

 

 

I have this basic setup:

 

<div id="wrapper">
    <div id="left_column" style="float:left; width:200px;"></div>
    <div id="right_column" style="float:right; width:200px;"></div>
    <div id="content_column" style="margin:0px 210px 0px 210px;"></div>
</div>

 

The problem I have experiencing is with the columns when the page is shrunk. Instead of the right column dropping below the content column, the content column drops down and the right column slides over.

 

Is their a way to force a minimum width (besides minimum-width: only supported in FF).

 

Or if I can't force a minimum width, force the right column to drop below the center column rather then the center column dropping down. If it gets small enough the center column should drop below the left column.

 

What have I setup incorrectly?

 

Note: I know their is a lot of code missing from the example above, I just wanted the basics of how it is laid out.

[cmgmyr]

This should help you out: http://www.glish.com/css/7.asp

[bronzemonkey]

You'd be better off putting the markup for the side columns inside the central column:

 

<div id="content" class="clearfix">

   <div id="left-column">
   hello i'm left-column content
   </div>

   <div id="right-column">
   hello i'm right-column content. here's a bit mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore mooore
   </div>

content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
</div>

 

Set the borders of the central column to 210px and then using negative margins to pull the side columns over those borders. You'll also need the clearfix "hack" to make sure the containing element clears the floats, and a little fix for IE6.

 

<style type="text/css">

html, body {margin:0px; padding:0px;}

#content {position:relative; display:block; border-left:210px solid #000; border-right:210px solid #000; overflow:visible;}
#left-column {float:left; position:relative; width:200px; margin-left:-205px; display:inline; color:#fff;}
#right-column {float:right; position:relative; width:200px; margin-right:-205px; display:inline; color:#fff;}

.clearfix:after {content: "."; display: block; height: 0; font-size:0; clear: both; visibility: hidden;}

</style>

<!--[if IE]>
<style type="text/css">
#content {display:inline-block;}
</style>
<![endif]-->

 

PS Separate the CSS from the structural markup