homepage Welcome to WebmasterWorld Guest from 54.167.185.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
centering a div on a whole page
tobypowers




msg:1197745
 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




msg:1197746
 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




msg:1197747
 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




msg:1197748
 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




msg:1197749
 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




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

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

tobypowers




msg:1197751
 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




msg:1197752
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved