Question

Good Morning,

I am developing a four column footer using pure CSS, but I have ran into some issues:
1) I can’t institute a vertical 1px white rules alongside each colum
2) The background does not cover the entire four colums
3) In Chrome, the columns do not appear across a single width, the fourth one being bumped below.

Here is my code: http://jsfiddle.net/eLzPk/

Answer 1

If you know the exact width of the footer you can do this with pure css. I just added a right border to the first 3 columns. FYI you forgot to declare the color of the border in your css. I also changed the width of the columns to 235px which is 940 / 4. First 3 have a 1px border so it’s width: 234px plus the border. Here is the fiddle http://jsfiddle.net/eLzPk/7/

#footer dl {
    background: black;
    float: left;
    margin: 0;
    padding: 10px 0 5px 0;
    width: 234px;
    border-right: 1px solid #fff;
}

#footer dl + dl + dl + dl {
    width: 235px;
    border-right: none;
}

EDIT

To further explain one of the problems with css is that with borders and margins are added to the declared width, so if you have four columns with a width: 25% and a border of 1px to create a dividing line, it’s actually 100% + 3px, which of of course larger than 100% so it causes the css to wrap.

There are 2 new solutions to this in css, one of them is fairly supported, it’s called box-sizing, here is a good article to reference. http://css-tricks.com/box-sizing/ Basically it sizes the box to the declared width and adds the borders and margin inside of that. The downside is that it’s not supported by IE7 and back. So to use it properly it’s best to use an IE conditional statement and implement some css/js hack for just those browsers.

The other solution is the flexbox model, and it has very little support yet. But it’s worth taking a look at. It allows you to have a container of any size, and size the children inside of it using ratios, to place them vertically or horizontally with ease, etc. It solves the box model issues as well as positioning and centering issues of all kinds.