Side borders on centred content page

HTML & CSS
1

I’m creating a site that has centred content that is about 900px across. On the left and right border edges of the content container I want to create a shaded stripe so it looks like its floating a little off the white background. How do I achieve this?

2

Give the margin equal to length of stripe and create div floating left and right.:slight_smile:

3

Adding graphical border styles to a fixed width container is simple. You create a 900px image, add your left and right styles to it and save it. (It does not have to be a big image, a small one will do that you can repeat vertically)

In this example, you have a fixed width, centred container that repeats your left and right borders through the background image you have created. The left and right corners are 30px wide, so you deduct that value from the width.



#container {
    width:840px; /* -30px left border and -30px right border */
    padding: 0 30px 0 30px; /* make room for bg to show, 30px each side */
    margin: 0 auto; /* center container */
    background:url(mybackground.png) repeat-y; /* repeat bg vertically */
}

A much more flexible method, however, is demonstrated and explained here.

4

On the left and right border edges of the content container I want to create a shaded stripe so it looks like its floating a little off the white background.
Hi,
The easiest way to take care of shadowed borders on a fixed width site is to incorporate the left and right images into one wide background image.

The image only needs to be about 10px tall then you set it as the background image and repeat it down the y-axis of the main wrapping div. You will need to set side padding on that div to keep the text out of the shadow.

That image I linked to above goes with This Demo and you will see the #wrapper BG styles and padding set up like this.

[B]#wrapper[/B] {
    min-height:100%;
    width:800px;
    margin:0 auto;
[COLOR=Blue]    padding:0 20px;      
    background:#EEF url(images/shadow.png) repeat-y;[/COLOR]
}
Edit:

Sorry Maleika, I should have refreshed the page :slight_smile:

5

thanks guys - just what I was looking for