CodingForums.com - Resolved Div Postitioning

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Resolved Div Postitioning (http://www.codingforums.com/showthread.php?t=256192)

designer21

04-06-2012 01:15 AM

Div Postitioning

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 (Post 1212717)

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 (Post 1212749)

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

All times are GMT +1. The time now is 04:28 PM.