Help with CSS div positioning

Question

Hi all, 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 :)

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.

Answer 2

hi ! :-)

do your (big) box have a fixed height/width or not?

whatever, try to set your small boxs in absolute, but don't use "left: 20px; top: 30px;" but "margin-right: -50px; margin-top: -80px;", it's maybe the solution...

good luck !

Answer 3

Use z-index to make the bottom div to overlay everything else and remove/hide it when needed. This is for sure a better css to go with "position: absolute; margin-top: -40px; margin-left: 20px; you also can do it as margin:-40px 20px 10px -3px; if needed. In general, I would sagest you to avoid absolute positioning or design your page in the way that will not require this approach.