Grow your CSS skills. Land your dream job.

Centered content with left and right image border

  • # December 14, 2012 at 7:05 pm

    Hi,
    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 {
    background-color:#e2e2e2;
    height:100%;
    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](http://codepen.io/joe/pen/ayGwK “http://codepen.io/joe/pen/ayGwK”)?

    # December 15, 2012 at 5:15 am

    Hi,

    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: http://teusje.files.wordpress.com/2011/03/microsoft-partner-network-logo-blocked-1.png

    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/

    Thanks!

    # 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:http://codepen.io/joe/full/zBibd

    # December 15, 2012 at 10:20 am

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

    http://codepen.io/wolfcry911/pen/ywKJe

    # December 15, 2012 at 10:24 am

    http://css-tricks.com/examples/GradientBorder/

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

    # December 17, 2012 at 1:32 am

    Hi,

    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.

*May or may not contain any actual "CSS" or "Tricks".