How to create a 4-columned, liquid footer?

Question

The content of the website is two-columned with the right being fixed and the left being liquid with min and max widths. I have that down, but now I'm having problems creating a liquid, 4-columned footer to go underneath. The way that I have it makes the columns look stepped like a staircase.

I need them all to line up correctly with equal amounts of space in between as the window gets stretched. The columns themselves are also of varying widths.

EDIT

I realized a mistake I made, which caused the columns to step, so now I can move on to figuring out how to space them out evenly in the footer. This is the CSS I have:

#footer .col1, #footer .col2, #footer .col3, #footer .col4{
    float: left;
    padding: 10px 0;
}

#footer .col1{
    width: 75px;
}

#footer .col2{
    width: 375px;
}

#footer .col3{
    width: 325px;
}

#footer .col4{
    width: 100px;
}

I used to have the widths as percentages, but it didn't evenly space them like I thought it would. Thanks for all your help!

Answer 1

Without seeing markup I'm not sure how to fix your problem. I would lay the page out like this:

````````````````````````````````````
|body_______________   __________  |
|| left             | |   right  | |
||__________________| |__________| |
||````````````````````````````````||
|| footer                         ||
|| |``````||``````||``````||``````|| 
|| | .col ||.col  || .col || .col ||
````````````````````````````````````

with the css:

#footer { width:100%; clear:both; }

#footer .col {
  width:25%;
  float:left;
  display:block;
}

Answer 2

The following will do it for you:

HTML

<div id="footer">
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
</div>

CSS

#footer .column {
    float: left;
    width: 25%;
    background: red;
}

#footer .column div {
    margin: 10px;
    height: 100px;
    background: blue;
}

And in action here.

I'm using the nested <div> structure to show how you can achieve liquid columns with a fixed distance between. The key when using % and fixed width dimensions is to not apply them to the same element if you want to be sure of widths. In a live site, it would make more sense to apply the fixed horizontal margin to the nested elements rather than create a nested div structure as I have.

Your columns are most likely stepping down because they are too wide to fit together in the same horizontal line. You'll notice in my example the width of the 4 outer div's adds up to 100%. Anything more (say by adding margin/padding) would cause the drop you're seeing.