Welcome to WebmasterWorld Guest from 54.205.251.179

Forum Moderators: not2easy

Message Too Old, No Replies

centering a div on a whole page

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

5+ Year Member



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

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

10+ Year Member



margin: auto (Doesn't work in IE5. Needs a valid Doctype to work in IE6.)
2:31 pm on Apr 6, 2006 (gmt 0)

5+ Year Member



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.

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

5+ Year Member



thanks for your tips - unfortunately problem not solved yet. might it be that I have divs inside the container div?
2:52 pm on Apr 6, 2006 (gmt 0)

5+ Year Member



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!

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

10+ Year Member



#wrapper {
width: 780px;
position: absolute;
left: 50%
margin-left: -390px; //half of the width
}
3:55 pm on Apr 6, 2006 (gmt 0)

5+ Year Member



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

cheers ;-)

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

5+ Year Member



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.