CSS - 5 fluid columns with 6 fixed separators, how to get them to equal 100% of containing div?


Tags: html,css

Problem :

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;
}


Solution :

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>

    CSS Howto..

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    How to make transition effect on css sprite hover

    How to disable CSS in Browser for testing purposes

    How to prevent html div from expanding when text size is changed

    How to create a HTML and CSS “Try it yourself” Editor [closed]

    How bad is to store all background images in CSS?

    How to select non-header cells with css

    In a 3 column grid of a varying number of elements, how to select only the elements that appear on the last line using CSS

    How to hide div on swipe in Angular

    How to Change Style of Parent
  • on Hover
  • How to Generate All Possible CSS 2 Selector Combinations?

    How to make the whole div clickable

    how to combine widget webapp framework with SEO-friendly CSS and JS files

    How do CSS radio tabs work?

    How to work with fixed positioning in CSS?

    CSS: how to style on character height versus line height

    How to prevent fixed image from scrolling down?

    How to make an element with background image appear using css animation/javascript

    Foundation 6: how to handle images that has an vertical overflow within one row?

    How to make a CSS menu from raw HTML code

    How can i make a fixed box inside a div with scroll?

    How to change the width of dynamically generated list boxes, based on user input?

    how to make this (table) using divs and css

    How to fade multiple background colors after few seconds? [duplicate]

    How do i make li active in angularJS?

    How to add multiple css gradient as a multiple background?

    How to set 0% css of keyframes as current css value for the element?

    How to define a Click handler function for multiple elements at the same time

    How to change font-size of multiple elements using jQuery

    How to vary the tone of an image dynamically using only css?