centering a div on a whole page

Forum Moderators: not2easy

Message Too Old, No Replies

centering a div on a whole page

tobypowers

2:16 pm on Apr 6, 2006 (gmt 0)

I know this question might be very basic but just started to use divs and couldn't find an answer.

I want to build a page with a defined div (850x480) that contains all the content within and is centered on the whole browser window. How can I achieve that?

tobypowers

Longhaired Genius

2:24 pm on Apr 6, 2006 (gmt 0)

margin: auto (Doesn't work in IE5. Needs a valid Doctype to work in IE6.)

4hero

2:31 pm on Apr 6, 2006 (gmt 0)

Hi,

You should start by studying w3schools tutorial. [w3schools.com], where you will find out alll about css and you can even take part in a quiz.

I can kick you off with this however:

The CSS
body {
text-align:center}

#container {
width:850px;
margin:0 auto}

The HTML
<body>
<div id="container">Your content starts here</div>
</body>

I will suggest you visit the above link, as it should get you off to a good start.

tobypowers

2:42 pm on Apr 6, 2006 (gmt 0)

thanks for your tips - unfortunately problem not solved yet. might it be that I have divs inside the container div?

4hero

2:52 pm on Apr 6, 2006 (gmt 0)

as Longhaired Genius said, you need the correct doctype for this to render correctly. Also it depends on how you are positioning the div's within the container. If you are position the div's inside absolutely then you will have to insert position:relative to the #container in the css.

Post your full code if you want us to take a look!

jo1ene

3:25 pm on Apr 6, 2006 (gmt 0)

#wrapper {
width: 780px;
position: absolute;
left: 50%
margin-left: -390px; //half of the width
}

tobypowers

3:55 pm on Apr 6, 2006 (gmt 0)

thanks again - have to run now - maybe I'll post my code later if I can't get a satisfactory result.

cheers ;-)

Kufu

8:14 pm on Apr 6, 2006 (gmt 0)

width: 780px;
or
width:850px;

That is generally too wide; it will overshoot the 800x600 screens and you'll end up with a horizontal scrollbar.

What you want to have is 760px.