Apologies for repeating a previously asked question about this [URL=“http://www.kirupa.com/css/shadows_borders.htm”]kirupa tutorial but as far as I can tell it was never answered.
Basically I want a central content area (solid white) which has a drop shadow behind it on either side, and a patterned background underneath (all done with CSS of course).
When I view the html in a browser (see below for code), the whole window expands to the full width of the background image eg 3000px. Any text that is inside the div doesn’t appear in the centre over the white content area but on the left, over the patterned area. (In fact the white content area isn’t even visible in the browser until you scroll right far enough to see it)
I’m sure this is something quite simple but if someone could explain what’s wrong in order to clear this up once and for all that’d be great!
I have the following CSS code which I got after doing the Kirupa tutorial called ‘Shadows as Borders: Tips and Tricks’:
/* CSS Code */
body {
margin: 0px;
background: #B4C0C9;
}
div#container {
background: url(images/bg_img.gif) repeat-y #FFF;
background-position: center;
width: 3000px;
height: auto;
margin: 0 auto;
}
/* XHTML Code */
<div id=“container”><p>content goes here</p></div>
