Simple center align!

The container must be set to a width that is less than that of the viewport if your going to center it! if you have width 100% then thats the full width of available screen so it can't center.

Hugo.

ive also tried setting it to different lengths, em, px, and non seem to make it center?! :?

Show a link.

Background position of an image will automatically be top left unless you specify otherwise. background-position: center center or 50% 50% will centre your image horizontally & vertically.

right, so far i have managed to center align the container. So that now when i resize the window, the divs stay center.

But now i want to have my menu on the side of a div, so that it also moves when resized. At the moment i can only correctly position via fixed, but when i resize, it stays put and the other divs move!!

body {
background: #FFFFCC;
padding:0;
margin:0;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 90%;
color: black;
}

.container {
text-align: center;
}

.header {
background-image: url("./images/header/header1.jpg");
background-position: center;
background-repeat: no-repeat;
height: 200px;
width: 760px;
}

.menu {
top: 200px;
position:absolute;
left: 100px;
}

.content {
background-image: url("./images/content.jpg");
background-position: center;
background-repeat: repeat-y;
width: 760px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#sideNav {
position: absolute;

width: 1em;
}

#sideNav dd {
position: absolute;
left: 5em;
margin-top: -5em;
width: 10em;
background: #CCCCCC;
border: 1px solid gray;
}

#sideNav ul {
padding: 2px;
}

#sideNav li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}

#sideNav li a {
color: #000;
text-decoration: none;
display: block;
}

#sideNav li a:hover {
color: #FFFFFF;
}

and the html is at

although ive now realised that the center align doesnt work in firefox!![/code]

I don't see anythign in your CSS that should cause the container to centre.

ive managed to get the desired effect using tables ...

but im trying to do it with CSS instead!!

To centre your container, you'll need to add margin:0 auto to it. To get your left menu where you want it, you'll need to use absolute positioning, but it needs to be in relation to your container, not the viewport. To enable this, you need to add position: relative to .container and then adjust your left & top values from there.

Ive got it how i want it to look, but it doesnt align correctly in Firefox, just IE??

Ive implemented your ideas and they worked, but just not in FF!

im not sure where your going pineapple??

Ive said that ive tried the things that tyssen had suggested and they still didnt work in FF.

Your code contains no mention of the margin: 0 auto; code that would center it in the Fox.

Also, your menu doesn't show at all in Firefox.

Also, your link up there is wrong

The reason that the code had no mention of the margin: ; property, was because i tried following the instructions by the letter, and they didnt work.

Also, turns out that the margin needs to be in the header and content div's, not the container itself.

Also, the menu doesnt show in firefox. But this only happens when it inside a DIV, any ideas??

To get a container to centre in Firefox, you apply margins to the container itself.

Try this code:

<div id="container">
this will be centred
</div>

#container {
width: 65px;
height: 200px;
margin: 0 auto;
}

Come on, try it, tell me what happens.