Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Problem Aligning a DIV template

Posted on 2006-03-30
4
Medium Priority
?
220 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;
}
0
Comment
Question by:nmretd
2 Comments
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 500 total points
ID: 16332491
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;
}
0
 
LVL 25

Assisted Solution

by:kevp75
kevp75 earned 500 total points
ID: 16337341
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
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question