[thelist] CSS Centered Layout

Lonnie.Kraemer lwkraemer at directvinternet.com
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 */
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 {

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

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

Lonnie Kraemer

More information about the thelist mailing list