Centered content with left and right image border

[wivm]

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!

[Paulie_D]

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.

[David_Leitch]

Perhaps you could do something a little more simple like [this](http://codepen.io/joe/pen/ayGwK “http://codepen.io/joe/pen/ayGwK”)?

[wivm]

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!

[Paulie_D]

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.

[Paulie_D]

Actually, it probably does make sense to that a wrapper around the content div:http://codepen.io/joe/full/zBibd

[wolfcry911]

Here’s a fork of Paulie’s work with a transparent border
http://codepen.io/wolfcry911/pen/ywKJe

[wivm]

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?

[Author]

Posts