Menu
I have outer div and inner div. I need to place inner div at the bottom of the outer one.
Outer div is elastic (width: 70% for example). I also need to center inner block.
Simple model of described make-up is shown on the picture below:
596
Div itself is a block element that means if you add div then it would start from under the another div. Still you can do this by using the css property that is display:block; or assign width:100%; add this to the div which you want under another div.
To place a div in bottom right corner of browser or iframe, we can use position:fixed along with right and bottom property value assigned to 0.
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
Without using position: absolute , you'd have to vertically align it. You can use vertical-align: bottom which, according to the docs: The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><body> <div style='background-color: yellow; width: 70%; height: 100px; position: relative;'> Outer <div style='background-color: green; position: absolute; left: 0; width: 100%; bottom: 0;'> <div style='background-color: magenta; width: 100px; height: 30px; margin: 0 auto; text-align: center'> Inner </div> </div> </div> </body> </html> Live version here: http://jsfiddle.net/RichieHindle/CresX/
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
