Question

Im trying to achieve a design that has five columns with fluid width, but also incorporates separator divs (with background images so they’re a fixed size). There has to be a way to get these columns + the separators to equal 100% width so then I can have the footer expand and contract with the content correctly.

I’ve looked at code for a fixed div floated against a fluid div, but can’t seem to expand the idea of negative margins to 5 fluid columns with 6 fixed separator divs.

Here’s what I have..

<div class="content">
 <div id="column-container">
  <div class="sep"></div>
  <div class="col_one"></div>
  <div class="sep1"></div>
  <div class="col_two"></div>
  <div class="sep2"></div>
  <div class="col_three"></div>
  <div class="sep3"></div>
  <div class="col_four"></div>
  <div class="sep4"></div>
  <div class="col_five"></div>
  <div class="sep5"></div>
 </div>
 <div class="footer">
 </div>
</div>

CSS is something like

.sep{
width:26px;
position:relative;
margin-top:-20px;
height:1113px;
float:left;
background-image:url('images/sep.png');
} // other sep divs are the same just using a different sep background
#column-container .col_one,#column-container .col_two,
#column-container .col_three,#column-container .col_four,
#column-container .col_five{
height:1090px;
overflow:hidden;
margin: 0 auto; 
width: 16.8%; 
float: left;
}
#content{
min-width:975px;
width:80%;
margin: 0 auto;
}

Answer 1

Option #1: Spend the rest of the week trying to figure out how to do this in javascript and never be completely satisfied with the result.

Option #2: Change the html structure a little.

<style type="text/css">
    #main_container {
        background-image:url('images/sep.png');
        background-repeat:repeat-y;
        padding-left:26px;
        overflow:hidden;
    }
    .column {
        width:20%;
        float:left;
        background-image:url('images/sep.png');
        background-repeat:repeat-y;
        background-position:top right;
    } .column_padder {
        padding:4px 30px 4px 4px;
    }
</style>

<div id="main_container">
    <div class="column"><div class="column_padder">Lorem ipsum de color sit amet. Consectatur adipising elit.</div></div>
    <div class="column"><div class="column_padder">Cut back on those dirty cheeseburgers, Randy!</div></div>
    <div class="column"><div class="column_padder">asdf</div></div>
    <div class="column"><div class="column_padder">asdf</div></div>
    <div class="column"><div class="column_padder">asdf</div></div>
</div>