CSS layout problem...

this is killing me...i can't make this work...

the problem is everything shifts to the left margin at x=0px;y=0px...it should be centering itself on the page...what am i doing wrong?

in the stylesheet...

#alles {
position: relative;
width: 751px;
height: auto;
margin: 0px auto;
z-index: 1;
}
#topbox {
float: left;
position: relative;
width: 308px;
height: 36px;
top: 0px;
left: 40px;
text-align: left;
z-index: 1;
background-color: #000000;
}
#randadv {
float: right;
position: relative;
width: 388px;
height: 30px;
text-align: right;
z-index: 1;
padding-top: 3px;
}
#featuredthings {
position: absolute;
width: 358px;
left:393px;
top:36px;
height: 120px;
text-align: left;
background-color: #f3f3f3;
z-index: 1;
}
#limg {
position: absolute;
width: 40px;
left:0px;
top:171px;
height:auto;
text-align: left;
z-index: 1;
}
#blog {
position: absolute;
width: 325px;
left:40px;
top:171px;
height:104px;
text-align: left;
z-index: 1;
}

then it's called up like this...

<div id="alles">

<div id="topbox"></div>
<div id="randadv"><span class="topdate">Today is the best day you've ever had
today</span></div>

<div id="featuredthings"><span class="featured">Featured_things</span></div>

<div id="limg"><img src="imgs/3a.jpg" width="33" height="33"></div>

<div id="blog">Blog stuff here</div>

</div>

thanks for any advice...v

My first post.. yeaaayyy

1. Certain browsers require that the body tag has text-align:center set within the stylesheet before centering any child content assigned a margin:auto

2. Floated divs don't need to have an explicit position:relative set within the stylesheet so these rules can be removed (if nothing else, it cuts a few bytes from the css filesize!)

Hope that fixes the problem..

Cha'mone,
OCB

well i think it's better if you use tables for ur design.

Bah!! Tables are evil

Well I can only speak from my experience but it's not too easy to use div's in this fashion to make a page that will display well in any browser - it can be done, but like dotcommakers tables are just better for layout control, simply cos they are designed to create a structure where cells (i.e td) are grouped and follow a set of rules for width/height. Div's don't do this by default, so you're just making more work for yourself for no reason.

actually, tables aren't designed to make layouts. the height attribute isn't even supported: run a table site in validator.w3.org

css isn't any more difficult, it's just a different skill to learn. csszengarden.com has some great examples of layouts that can be done with stylesheets

Erm, try www.crymsonspyder.com/newcs in validator.w3.org (though don't go finding any errors on the pages, cos it's not 100% tested yet lol).

Height isn't supported in HTML, but that's cos you're supposed to do all the size/colour etc. stuff with css for all objects, divs, tables everything.