another HTML/CSS layout challenge

Question

I\'ve been trying to figure out a solution to this problem but haven\'t been 100% successful, just pseudo successful. The layout I\'m looking for is one such that there is a

Answer 1

I came up with this:

http://jsfiddle.net/bKsad/

• Due to the use of box-sizing: border-box, it won't work in IE7 and older.
• It should work in all modern browsers.
• You could replace #padding-bottom with #content:after. Beware IE8 though, I couldn't quite get it working.

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: url(http://dummyimage.com/100x100/f0f/fff);
}

#wrapper {
    margin: 0 auto;
    width: 300px;
    height: 100%;
    padding: 15px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    background-color: #C9E6FF;
    min-height: 100%;
}
#padding-bottom {
    height: 15px;
}

HTML:

    

        
some content
        
some content
        
some content