Resolved Div Postitioning

designer21 · 04-06-2012, 01:15 AM

Hi

I am currently building a website as part of my FinalMajor project for college.I have laid out all the divs where i want them all to be however i would like to position them all in the center of the browser instead of the left where they are now.

Is there a simple piece of code i can use to do this?

I am using a an external CSS sheets as well if that helps.

Any help is greatly appreciated

Adam

Excavator · 04-06-2012, 02:05 AM

Hello designer21,
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

Typically, for an entire site, you would center a containing element and place your divs inside that.

Myskillzownu · 04-06-2012, 02:26 AM

What Excavator said is exactly right.

Just follow steps one and two and for step three just type
margin-left: auto;
margin-right: auto; in your css

Mishu · 04-06-2012, 02:33 AM

Quote:

Originally Posted by designer21

Is there a simple piece of code i can use to do this?

Code:

        
        <style type="text/css">
            #wrapper{
                width: 900px;
                margin: 10px auto 0px auto;
                border : 1px solid blue;
            }
        </style>

Code:

    
    <body>
        <div id="wrapper">
            Page contents go here
        </div>
    </body>

Excavator · 04-06-2012, 03:26 AM

I always like to supply valid code when providing examples to a newbie that may have no idea about DocTypes or how an .html document is laid out. We can always address linked/attached CSS later if needed.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	height: 600px; /*for demo only*/
	width: 800px;
	margin: 30px auto;
	background: #999;
}
</style>
</head>
<body>
    <div id="container">
Your very interesting website would go here
    <!--end container--></div>
</body>
</html>

Mishu · 04-06-2012, 03:35 AM

Quote:

Originally Posted by Excavator

We can always address linked/attached CSS later if needed.

probably not needed as the op said they are currently using an external stylesheet so the contents in style blocks can go in the external css.

designer21 · 04-06-2012, 12:52 PM

Thanks for your help guys, for some reason when i tried putting a wrapper div it didn't center it with thhe margins set to auto howeer when i did the divs seperately they did, thanks again