The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Centered content with left and right image border

  • # December 14, 2012 at 7:05 pm

    I am still used to the days when tables where used to style a website. Today I am creating a new personal website, and want to do it the proper way with HTML5 and CSS3. But I have a problem…

    I basically want a centered white content DIV of 960px. Next to that I want two images that are the borders between the content and the background. This is how I managed to get it work, but it does not really feel correct because when I enable “compatibilty view” in IE, I get an ugly looking think. :-)

    Note: border-left.png = 79px and border-left.png = 51px, therefore you see these numbers appearing.

    html, body {
    margin: 0 auto;
    width: 1090px;
    height: 100%;

    #wrapper {
    margin: 0 auto;
    width: 1090px;
    height: 100%;
    position: absolute;

    #content {
    margin: 0 auto;
    width: 960px;
    height: 100%;
    position: absolute;
    background-color: #ffffff;
    margin-left: 79px;

    #border-left {
    background: url(“images/border-left.png”);
    float: left;
    width: 79px;
    height: 100%;

    #border-right {
    background: url(“images/border-right.png”);
    float: right;
    width: 51px;
    height: 100%;

    Could someone help me to do it the proper way?

    Thank you!

    # December 15, 2012 at 3:36 am

    We’d really need to see the images…and the site. Do you have a link?

    I don’t like the idea of those divs being there JUST to have bg images. I know that sometimes you have to but I wonder if there isn’t a better solution that will work in IE8.

    # December 15, 2012 at 3:50 am

    Perhaps you could do something a little more simple like [this]( “”)?

    # December 15, 2012 at 5:15 am


    My website is not online so I can not provide you my pictures. But I found one that is simular as what I want to do:

    See the left and right border that is (in this case) transparant. My project is more or less the same. My border doesn’t need to be transparant, but I use pictures to fade over. The page setup is also more or less the same. Only in my case the logo is inside the white centered content area/


    # December 15, 2012 at 9:39 am

    Looks to me as though all you need is a BODY bg image suitably positioned if it’s going to be the only one on the page.

    # December 15, 2012 at 9:56 am

    Actually, it probably does make sense to that a wrapper around the content div:

    # December 15, 2012 at 10:20 am

    Here’s a fork of Paulie’s work with a transparent border

    # December 15, 2012 at 10:24 am

    This reply has been reported for inappropriate content.

    adapt for images rather than gradients and ya have a nice choice of methods

    # December 17, 2012 at 1:32 am


    Thank you all. It has been a great help! I changed the design a little bit, based on your tips. This is the current code:

    Test Website

    This looks great in IE9 & Firefox, but in IE8 on one PC I get a really scattered background. Strange, because it is one big image of 2600 px x 1400 px (to fit for large screens as well).

    The border with the shadow is also not working, except for IE9 & Firefox.

    One final think, could I not do it without the wrapper in this case? Or is it still required?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed