Four Col Footer in CSS - html

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.

Answer 2

How about something like this? Adding another Div Container with a fixed size inside of one that will adjust to the size of the browser. The Background can then be stretched using the commented code in #footer. You have to be aware of your margins, padding & borders when creating div sizes.
Every pixel counts ;)
Anywho hope this helps! Link for jsFiddle at bottom
#footer {
background: black
/* This would be your Background Image code for whole Footer.
background: url(FOOTER IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
padding-right: 15px;
position: relative;
min-height: 250px;
text-align: center;
width:100%;
margin-left:auto;
margin-right:auto;
} /*IE6*/
#footerContainer {
width:940px;
height:250px;
display:block;
}
#footer dl {
display:inline-block;
background: black;
float: left;
text-align: left;
margin: 0px;
padding: 10px 0 5px 10px;
width: 224px; /* Take into account the 1px Border & padding*/
height:inherit;
border-left: 1px solid white;
}
Something like this: http://jsfiddle.net/GFargo/eLzPk/1/

Answer 3

As ACJ mentioned:
The border width (1 pixel) is added to the width, so four times 25%
plus 4 pixels is always more than 100%
You're better off defining a few set values to solve this.
Your shorthand border property was not working because although you defined a width (1px), its type (solid), you were missing (color).
If you're also working in HTML5, you can use the tag too...
Roughly, with some tweaking:
http://jsfiddle.net/eLzPk/8/