[Tom_E]

Currently putting my web site together, wanted to know if my way of horizontally centering site is ok or not. Works fine in all browsers I've tested in so far, going back to IE5.2. I'm mac based so not tested on pc yet.

Basically, I've positioned the background relatively, with auto margins left/right, with every other div absolutely positioned inside it.

Is this good practice or amateur shite?!

I know this is basic stuff to you web developers out there but I come from DTP (print) background so I'm learning XHTML/CSS as I go, this is only the third site I've put together and the first being nearly all CSS.

Example CSS below, any advice/help appreciated.

.main {
position: relative;
visibility: inherit;
z-index: 1;
margin-left: auto;
margin-right: auto;
left: 0px;
Top: 5px;
height: 960px;
width: 860px;
background-image: url(images/bg.jpg);
bottom: 10px;
}
.textbox {
position: absolute;
visibility: visible;
z-index: 2;
left: 30px;
Top: 300px;
height: 500px;
width: 500px;
margin-top: 0px;
}
#sidebox {
position:absolute;
left:591px;
top:300px;
width:241px;
height:219px;
z-index:3;
visibility: visible;
}
#urlnav {
position:absolute;
left:23px;
top:16px;
width:206px;
height:34px;
z-index:4;
}

[freelancr]

Amateur shite I am afraid, you just have far too much going on there. I try to never use "position" as it is very buggy across browsers/resolutions, and I never use "z-index" as it doesn't seem to do anything. I also never set "height" unless its is required, because padding/margin/line-height usually does the job better.

If you are going to set an "#id" then make sure it is only used once on the page, if you are going to set a ".class", only do so if you are planning on using it more than once on the page, or for different objects.

Here is a good technique I follow for centering objects:
CSS Centering: Auto-width Margins

Here is how I write my CSS (and follow the same structure any programming language for that matter) Take note of the return before the "{". It isn't a requirement, though does make code look nicer and easier to read.

*
{
	margin: 0;
	padding: 0;
}
body
{
	text-align: center;
}
img
{
	border: 0;
}
.class
{
	color: #ff0000;
}
#wrapper
{
	width: 760px;
	margin: 0 auto;
}

[brooks]

You really do not need to position everything absolutely, that markup isn't very nice at all. The following two sites will help you learn a lot and get that bad practise out of you I hope

CSS Beginner Tutorial | HTML Dog
Simple 2 column CSS layout | 456 Berea Street

[pgo]

Floats are generally superior. Shouldn't need z-index or positioning for such a simple layout.

[Tom_E]

thanks for the feedback, it does seem to work on all browsers I've tested so far (Firefox, IE, Safari) but I had the feeling it was not the best way to do it. It's the only way I know!

As I said I'm new to CSS (at least I'm not using tables!), I'll check out those links you provided, just hope I can easily change the CSS as I really don't want to scrap the site and start again.

This is my portfolio site so I've done the whole thing this way…