[thelist] CSS Centered Layout

Fri Oct 11 18:41:01 CDT 2002

> I am specifically referring to horizontal centering, not vertical.
> On many of my sites, I'll create something like a 760px wide box,
> within which all graphics, navigation, copy, etc. will reside. It
> will usually contain multiple columns for text, and for some of
> the graphics to reside.
>
> I wish to steer clear of relative positioning, and stick to
> absolute positioning wherever possible. Again, my experience
> has been that relative positioning generally requires more
> cross-browser tweaking than absolute.
>
> All graphics and whatnot are positioned by the pixel from the
> LEFT and TOP on the page. Again, when you're starting your
> positioning from the left edge and top edge of the browser, all
> of this is really easy to do.
>
> But, if I create a bounding box and center that to the browser,
> which in Craig's suggestion would be by a PERCENTAGE distance
> from the left (and an absolute width for the box itself), then
> the absolute positioning of elements WITHIN the box from the
> left edge would also have to be based on a percentage, as well.
>
> In relative positioning, I can position items relative to the
> left edge of the bounding box itself, but insofar as I know,
> this sort of thing is not possible using absolute positioning.
>
> What I'd like to know is if there's any solution to doing the
> centering of the bounding box AND use absolute positioning for
> all elements within that box.
>
> Don't know. Maybe not. But, I thought I'd ask.
>
> And, of course, I hope that this is all making sense. Who
> knows, maybe I'm being confusing...
>

div#boundingbox {
position:relative; /* or absolute */
top:0;
left:50%;
margin-left:-380px; /* centers a 760px _container_ */
}

Now you can nest elements within #boundingbox using position:absolute;
which starts at the top/left of #boundingbox. Remember,
position:absolute; references an element's most recently _positioned_
parent element. This is important. If you don't explicitly position
#boundingbox, any nested element will take absolute positioning to be
(possibly) <body>.

#mygraphic {
position:absolute;
top:10px;
left:10px;
}

<body>
<div id="boundingbox">
<img id="mygraphic" src="" />
</div>

...mygraphic will position absolutely 10px from the top and left of
wherever boundingbox top:0 left;0 is.

--
Lonnie Kraemer
-----------------------------------------