(CSS) How position text (with background color) over tag without absolute positioning?

I see no reason not to use position: absolute See: jsfiddle.net/NeaR4 CSS: container { border: 2px dashed #444; float: left; position: relative } . Container img { display: block } . Container > div { position: absolute; left: 0; bottom: 0; right: 0; height: 14px; background: #000; background: rgba(0,0,0,0.7); color: #fff; overflow: hidden; font: bold 14px Arial, sans-serif; padding: 5px; } .

Container:hover > div { height: auto } HTML: div class="container"> some text with line oneeee, line twoooooooo ooooooo , line three.

I see no reason not to use position: absolute. See: jsfiddle.net/NeaR4/ CSS: . Container { border: 2px dashed #444; float: left; position: relative } .

Container img { display: block } . Container > div { position: absolute; left: 0; bottom: 0; right: 0; height: 14px; background: #000; background: rgba(0,0,0,0.7); color: #fff; overflow: hidden; font: bold 14px Arial, sans-serif; padding: 5px; } . Container:hover > div { height: auto } HTML: some text with line oneeee, line twoooooooo ooooooo , line three.

I already use absolute positioning and was looking for something better , anyhow THANKS for your time :) – Bialy May 14 at 0:07 I'll have a look at getting that working in IE6. Are you alright with using (minor) JavaScript? – thirtydot May 14 at 0:12 No problem, I already use Jquery – Bialy May 14 at 0:17 (after I noticed you accepted my answer that doesn't work in IE6) Should I look at making this work in IE6?

– thirtydot May 14 at 0:17 1 Tested and works GREAT! THANKS thirtydot :) – Bialy May 14 at 2:26.

Magical unicorn dust should do the trick. Or maybe position:relative if absolute is not your thing?