http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/ «for all your web design needs» Thu, 29 Jul 2010 19:48:51 +0000 http://wordpress.org/?v=2.0.4 http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-675 Wed, 01 Mar 2006 17:58:35 +0000 http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-675 Hi again, If you want an effect such as a middle table and background image, you can create a wrapper div that works much the same way as an outer table. you specify the width of the wrapper div (no more than 780 pixels is usual because then it wont scroll if people are using small monitors, and will have space either side on bigger screens). You can make it smaller of course, but pixels are easier to judge than percentages in my opinion. If you want the wrapper to be centred on the screen, you add this to your css: It is the margin, padding text align and width that are important for centring. The body margin of 30px simply gives you a gap of 30px from the top of the screen before your wrapper begins. You can adjust this size to suit. <code>html, body {margin: 0; padding: 0; border: 0;} </code> <code>body { margin: 30px auto; padding: 0; font-size: ; font-family: name of font(s), sans-serif; background:#e7e7e7 url(images/yourbackgroundimage.jpg); /* base color if desired and path to image url */ text-align: center; color: #333 colour of main text on page goes here ; }</code> <code>#wrapper { background: url(images/yourinnerbackground.jpg) ; text-align: left; margin: 0 auto; padding: 0; width: 780px; /* or your choice of size */ }</code> The main wrapper div has simply been called wrapper here, but you can call it anything you like of course. In your html, you would say: <code> html head head content goes here including styles /head body div id="wrapper" page content goes here... /div /body /html</code> Other columns and boxes can be positioned inside your wrapper div as you want them. ( obviously the html will need proper code tags around the head, div etc, but I cant put them in here, or the browser thinks they are real tags and tries to use them.:headbang: