Posted by sagejoshua on 10/10/05 17:42

On 10 Oct 2005 06:55:02 -0700, roel.schreurs@gmail.com wrote:


>DIV test with absolute widths; not working properly. The content keeps
>left aligned.


> <div style="background:blue; margin-left:auto; margin-right:auto;
>width=600px">
> <div style="background:red; float:left; width=100px">
> LEFT
> </div>
> <div style="background:yellow; float:left; width=400px">
> MIDDLE
> </div>
> <div style="background:green; float:left; width=100px">
> RIGHT
> </div>
> </div>
> </body>
></html>

You've got the right idea with this one. You need a container div.
Problem is that auto margins don't work in all broswers. A great (and
suprisingly interoperable - even works in netscape 4.7) hack is using
negative margins. For example, for your container div of 600px, use
the following css:

#container {
width: 600px;
position: absolute;
left: 50%;
margin-left: -300px;
}

What that does is align the left edge at exactly the middle of the
page, and then move it 300px pixels left (via the negative margin),
and viola! you've got centered content.

Good luck,
-josh

[Back to original message]