CSS Positioning

I'm ready to use it, but don't know how

[MatthewHSE]

A few weeks ago, I posted about CSS positioning. At that time I got some valuable advice from Papa Baer, and now I'm ready to take his advice to heart and begin using CSS positioning.

But, as usual, there's a problem.

I'm redesigning my site - giving it a total overhaul in the area of presentation. I've gone from a fluid, whole-screen-width layout to a fixed, centered, 740-pixel width.

I've got my entire content area in a single "main content" div, which I centered by setting the left and right margins to auto. My problem comes from the fact that I don't know how to use CSS positioning to position certain items anything other than center. For instance, part of my header is a graphic 378 pixels wide. Just to the right of it, I've got some navigation links set up in a table (using rollover table cell effects). The table is 362 pixels wide.

How can I use CSS positioning to get those two items, the image and the table, just the right amount off center, regardless of screen resolution?

I wouldn't be worrying about it, except that I want my header code to come after my content code, for SE benefits.

If anyone wants the exact URL of the page I'm talking about, please sticky me.

I'd sure appreciate some advice on this one!

Thanks,

Matthew

[Purple Martin]

Set the left edge of a div to 50%, and then give it a negative margin-left specified in pixels. For example:

.stuff {
position: absolute;
left: 50%;
margin-left: -123px;
}

This will keep the left edge of the div the same distance to the left of the center-line.

If the div is to go to the right of the center-line, use a positive margin-left.