Hi

 

I'm fairly new to web design and have done a few sites for fun. Now i'm totally stuck on something I thought would be really really simple.

 

All i want is the basic layout of my website to be a black background, then a white forground that covers about 70% of the page....so that effectively it looks like a white page with wide black borders at each side.

 

I don't want to use tables.

 

In fact, webdesignerforum website is fairly similar in basic style, with the edges at each side of this main part.

 

Anyone got any suggestions? I've tried so many things and i'm pretty much gonna cry if I don't sort this out soon because it seems so simple.

 

Thanks

Welcome to WDF!

 

First you need to set a couple of styles for background and your content area...

 

body {background: #000000;}
#content {width: 70%; background: #FFFFFF; margin: 0 auto;}

 

Then add this to your HTML page, this will be where you add your content, 70% wide, white background and centered on the page.

 

<div id="content">

Your content

</div>

Hi

 

I'm fairly new to web design and have done a few sites for fun. Now i'm totally stuck on something I thought would be really really simple.

 

All i want is the basic layout of my website to be a black background, then a white forground that covers about 70% of the page....so that effectively it looks like a white page with wide black borders at each side.

 

I don't want to use tables.

 

In fact, webdesignerforum website is fairly similar in basic style, with the edges at each side of this main part.

 

Anyone got any suggestions? I've tried so many things and i'm pretty much gonna cry if I don't sort this out soon because it seems so simple.

 

Thanks

 

Two ways to do this my friend.

 

Using a Graphic.

 

1. Create a white background of the desired width in your favourite graphics package. Make it 1px in height.

2. in your css file add the following:-

 

body
{background:#000 url(<path_to_background_image>) repeat-y top center;
 margin:auto auto
 width:800px;}

 

The only trouble with this method is that when the font is resized, it will appear to break out of the white space in IE.

 

Using a 3-Column Layout

A List Apart explains it much better than I ever could!

 

You would then just need to set the background color property in the left and right divs to #000;

HTH.

Scrub what I just said, Bluedreamers solution is much simpler! lol!!