We help IT Professionals succeed at work.

Problem Aligning a DIV template

nmretd
nmretd asked
on
Medium Priority
235 Views
Last Modified: 2010-04-09
I have the following template and I want to center align it on the page. I am having a lot of difficulty in trying to get it to work. Can someone show me help me with this ?
Thanks.

<HTML>
<HEAD>
 <TITLE></TITLE>
 <link href="styles3.css" type="text/css" rel="stylesheet">
</HEAD>

<BODY BGCOLOR=#FFFFFF>

<div class="float2">
  <p>

  </p>
</div>

<div class="float3">
  <p>

  </p>
</div>

<div class="float4">
  <p>

  </p>
</div>

<div class="float5">

</div>

</BODY>
</HTML>

CSS

div.float2
{
  position:absolute;
  padding: 1px;
  left: 5;
  top:5;
  width:600;
  height:60;
  border:1px solid gray;
}

div.float3
{
  position:absolute;
  padding: 1px;
  left: 5;
  top:64;
  width:400;
  height:250;
  border:1px solid gray;
}

div.float4
{
  position:absolute;
  padding: 5px;
  left: 404;
  top:64;
  width:201;
  height:321;
  border:1px solid gray;
}

div.float5
{
  position:absolute;
  padding: 5px;
  left: 5;
  top:313;
  width:400;
  height:72;
  border:1px solid gray;
}
Comment
Watch Question

wrap everything in a container:

After <body....> add
  <div id="container">
and before </body> add
   </div>

Then:

#container {
margin:0 auto;
width:600px;
position:relative;
}

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Commented:
Eternal_Student is correct

the big thing is the margin:0 auto;

you could get away with adding it to the rest of your divs if you didn't want to go with the wrapper method
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.