How do you center a main container?

okpeery · Oct 27, 2006

I have forgotten how to center a main container on a page. My main container should be around 900px wide. Within that container I want to have 6 more content containers about 440px wide so that content 1 and 2 are next to each other, content 3 and 4 are on the next line next to each other, and content 5 and 6 are on the next line and next to each other. Content 7 will be 890px all the way across like a footer. I am rusty and am trying to design a lesson plan template for teachers in my school. I want to make borders around each div so I can position them properly and then add content. Ignore my <br /> tags for now please.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Your Name and Lesson Plans</title>
<style type="text/css">
body
	{background-color:#FFFF66;}
	{text-align:center;}
	{margin: 0 auto;}
div#container
	{width: 900px;}
	{border:1px dotted black;}
div#content1
	{width: 440px;}
	{border:1px dotted black;}

div#content2
	{width: 440px;}
	{border:1px dotted black;}

div#content3
	{width: 440px;}
	{border:1px dotted black;}

div#content4
	{width: 440px;}
	{border:1px dotted black;}

div#content5
	{width: 440px;}
	{border:1px dotted black;}

div#content6
	{width: 440px;}
	{border:1px dotted black;}

div#content7
	{width: 890px;}
	{border:1px dotted black;}

	
</style>
</head>

<body>
<div id="container">
	<div id="content1">
		<p>
		Mr. Peery<br />
		Hill Freedman Middle School<br />
		Lesson Plans<br />
		Week of 10/30/2006<br />
		</p>
		
		<div id="content2">
			<p>Blue Ribbon Logo goes here</p>
			<div id="content3">
				<p>Objectives go here</p>
				<div id="content4">
					<p>Areas of interaction go here</p>
					<div id="content5">
						<p>Essential Questions go here</p>
						<div id="content6">
							<p>Everyday Materials go here</p>
							<div id="content7">
								<p>Learning Activities go here</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

I cannot have css in an external sheet, it must be internal as well. I'm sure I'm forgetting many simple rules but i promised my principal I would stay today until the template is done.

cLFlaVA · Oct 27, 2006

to center a container:

Code:

body {
    text-align: center;
}

#container-id {
    margin: 0 auto;
    text-align: left;
}

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

okpeery · Oct 27, 2006

Thanks for the help. I was trying to use Dreamweaver as a text editor as I don't have a good one at my school and it put things in I didn't mean to have. I will clean it up a bit and repost. Sorry for such messy code.

okpeery · Oct 27, 2006

Here is my updated code. I am expecting that since the main container is 900px wide and the first 6 div's are 450px wide that the normal document flow would force 2 div's side by side for the first 6 div's and then the last one would be at the bottom all by itself because it is 900px wide. This is not happening so I am assuming something wrong. Do I need to float or zero out margins and padding?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Your Name and Lesson Plans</title>
<style type="text/css">

body
	{
	background-color:#FFFF66;
	text-align:center;
	}

div#container
	{
	width: 900px;
	border:1px dotted black;
	text-align:left;
	}

div#content1
	{
	width: 450px;
	border:1px dotted black;
	}

div#content2
	{
	width: 450px;
	border:1px dotted black;
	}

div#content3
	{
	width: 450px;
	border:1px dotted black;
	}

div#content4
	{
	width: 450px;
	border:1px dotted black;
	}

div#content5
	{
	width: 450px;
	border:1px dotted black;
	}

div#content6
	{
	width: 450px;
	border:1px dotted black;
	}

div#content7
	{
	width: 900px;
	border:1px dotted black;
	}

	
</style>
</head>

<body>
<div id="container">
	<div id="content1">
		<p>
		Mr. Peery<br />
		Hill Freedman Middle School<br />
		Lesson Plans<br />
		Week of 10/30/2006<br />
		</p>
		
		<div id="content2">
			<p>Blue Ribbon Logo goes here</p>
			<div id="content3">
				<p>Objectives go here</p>
				<div id="content4">
					<p>Areas of interaction go here</p>
					<div id="content5">
						<p>Essential Questions go here</p>
						<div id="content6">
							<p>Everyday Materials go here</p>
							<div id="content7">
								<p>Learning Activities go here</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

cLFlaVA · Oct 27, 2006

different browsers render widths differently. take a look at this explanation, then let us know if you have more questions.

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Vragabond · Oct 27, 2006

Here are the main problems.

1. By default, divs are block level elements so they will always appear in a new line. If you want them to be side by side, you need to float them left or right.

2. You're nesting all your divs into each other, but when describing what you want you describe them as siblings. Your code should be more like:

Code:

<container>
 <div1></div1>
 <div2></div2>
 <div3></div3>
 <div4></div4>
 <div5></div5>
 <div6></div6>
 <div7></div7>
</container>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do you center a main container?

okpeery

Instructor

cLFlaVA

Programmer

okpeery

Instructor

okpeery

Instructor

cLFlaVA

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor