Question

a bit of a softball CSS question here (hopefully).

I’m looking for some CSS help with regards to the attached screenshot. I have the larger box being properly centered, however the smaller boxes are giving me some problems.

For the top small box, I had initially tried using absolute positioning, but once the browser is resized it sticks but my larger box obviously shifts, so this is no good.

The bottom small box basically needs to stick to the bottom. I plan on making it hide and show with jQuery, so it really shouldn’t break the flow of any text inside (I just want it to appear on top of everything else).

Really, I don’t have any limitations other than what I’ve mentioned above, so any suggestion would be very helpful 🙂

alt text http://img812.imageshack.us/img812/3598/screenbg.png

Edit – this is where I’m currently at.

#container {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

Answer 1

I think you’re on the right track. If you don’t care about layering/overlap of the boxes, then just use position: absolute for the little boxes, and position: relative for the big box. The latter may be the key you are missing as this anchors the little boxes to the big one.

UPDATE

I do not suggest using negative margins as some other users have. The whole point of position: absolute is to precisely place an element using the properties right, top, bottom, left. If you move an absolutely positioned element solely with negative margins, it will still be at the mercy of it’s place in the document order.

For example, if I placed a lot of content or a larger image before my absolutely positioned element with negative margins, it would no longer appear in the same place. If this is desired, then great. But I don’t believe so based on the original question.