Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

centering a div on a whole page

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

New User

5+ Year Member

joined:Apr 6, 2006
posts:6
votes: 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

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

Preferred Member

10+ Year Member

joined:Aug 28, 2002
posts:564
votes: 0


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

Junior Member

5+ Year Member

joined:Apr 4, 2006
posts:111
votes: 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.

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

New User

5+ Year Member

joined:Apr 6, 2006
posts:6
votes: 0


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)

Junior Member

5+ Year Member

joined:Apr 4, 2006
posts:111
votes: 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!

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

Preferred Member

10+ Year Member

joined:May 20, 2004
posts:469
votes: 0


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

New User

5+ Year Member

joined:Apr 6, 2006
posts:6
votes: 0


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)

Preferred Member

10+ Year Member

joined:June 6, 2005
posts:524
votes: 1


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.