...

View Full Version : Central Page Content Alignment



mlse
06-02-2005, 03:22 PM
Hi,

I have been ripping my hair out and screaming purple-faced obscenities at my computer for the last hour, trying to get my page content to align centrally in all web browsers (i.e. not relying on the I.E. hack mentioned in the pinned topic on this sublect). I was so dippily chuffed when I finally managed to do it, that I thought I should post it! (it could be smartened up and reduced in size with CSS, but it's only an example, so I'm not fussed).

<smug mode>
Here it is - Mike's central page alignment code which doesn't rely on any kind of hacks - also, it scrolls when the page gets too narrow to display all the content. :D :D :D
</smug mode>

Full webpage:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Central Alignment Test</title>
</head>

<body>
<div style="top:0px;left:0px;width:100%;height:100%;position:absolute">
<div style="
top:50px;
width:500px;
height:600px;
margin-left:50%;
left:-250px;
background:#CCFFFF;
position:absolute">

<div style="
top:100px;
left:50px;
width:300px;
background:#3333FF;
color:#FFFFFF;
position:absolute;
font-size:20px;
font-family:sans-serif;
padding-left:10px;
line-height:40px">
Central
</div>

<div style="
top:280px;
left:100px;
width:300px;
background:#3333FF;
color:#FFFFFF;
position:absolute;
font-size:20px;
font-family:sans-serif;
text-align:center;
line-height:40px">
Alignment
</div>

<div style="
top:460px;
left:150px;
width:300px;
background:#3333FF;
color:#FFFFFF;
position:absolute;
font-size:20px;
font-family:sans-serif;
text-align:right;
padding-right:10px;
line-height:40px">
Test
</div>
</div>
</div>
</body>
</html>


I have tested it using IE, Moz and FF. It would be interesting to know if someone can "break" it.

Mike.

JamieR
06-02-2005, 03:58 PM
To center a div, you use:


margin: 0 auto;
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum