I thought I understood absolute positioning, but look at the CSS in the source for this simple program that positions a sprite to play a craps game.


The game works, but I put the game in an absolutely positioned div to place the game at the top right, so the background would show well. A normally positioned paragraph at the bottom of that div gives messages. However, when the message changed to a longer length it expanded the div left, moving the game, which was undesirable

I made the paragraph absolutely positioned and that fixed everything. There is no movement and the paragraph stays within the containing div.

Except that's not the way I thought absolute positioning worked.

I assumed the absolutely positioned paragraph would be at top:0 and left:0 of the containing div, the default, laying over the buttons, so I'd have to position it. Yet it was in the right place, at the bottom of normal flow inside the div. I also thought the words would overflow the containing div, but they are staying inside it even though I gave no width to either div.

So where am I thinking wrong? I checked a couple of books but they are very scanty on absolute positioning, to the point whether I wondered if the authors weren't clear on it. I thought I was but obviously I'm not ;')

BTW, the program works in all the real browsers, but chokes a bit in IE8 if a tab is already open. Not sure why. I pray for deliverance from IE some day. IE9 Finally has CSS3 and HTML5, but in a clever marketing ploy, only if you buy Win 7, and a lot of institutions like libraries still have a lot of XP. So we'll be stuck with IE8 for a long time.