I'm trying to align one div to the bottom inside of another, and a third div to just beneath that one. Since the third div will appear on mouseover, it needs to lie on top of other content that will already be there. I've tried various combinations of positioning, setting margins, etc., but I can't figure out a solution that will work in all the browsers. This is just the bare bones so that you can maybe see what I'm trying to achieve here.... Confused? Yes, me too; Here's the html: <html> <head> <link href="test2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="widebar"> <div id="tabs"> <div class="menu1">I want these</div> <div class="menu2">to align to the</div> <div class="menu3">very bottom </div> <div class="menu4">of this div </div> <div id="tabs2">Align this to the bottom left corner of the Tabs 1 section so that it shows up just below the dark blue area</div> </div> </div> Here is some text that will sit below the these divs and I don't want the mouseover to "push" this text out of the way. The div that appears on mouseover should sit "on top" of this text with no interference. </body> </html> Code (markup): And here's the css, thus far: /* css */ #widebar { width:100%; height: 200px; background: #ffccff; } #tabs { float:right; display:block; #position: absolute; #bottom:0; height: 200px; background:#334ddd; width:50%; } #tabs2 { clear:both; #position: relative; #bottom: 0; background: #567dfe; } .menu1, .menu2, .menu3, .menu4 { float:left; width: 100px; background: #ccc; } Code (markup):