Menu
Given the following HTML
<div style="width: 500px; height: 500px; border: 1px solid red;"> <div style="width: 200px; height: 100px; border: 1px solid green; float: right; vertical-align: bottom;"> </div> </div> I would like the inner div to lock into the lower right hand corner of the outer div. What do I need to do CSS wise to make that happen?
Thanks! John
640
To move the inner div container to the centre of the parent div we have to use the margin property of style attribute. We can adjust the space around any HTML element by this margin property just by providing desired values to it.
To make a div always float on the screen in top right corner with CSS, we use fixed position. to make the element with ID fixedElement fixed to the screen. We make it fixed with position: fixed; . Then we make it stay at the bottom with bottom: 0; .
you can play with the top and right properties. If you want to float the div even when you scroll down, just change position:absolute; to position:fixed; .
position is your friend
<div style="width: 500px; height: 150px; border: 1px solid red; position: relative"> <div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;"> </div> </div>
<div style="position:relative; width: 500px; height: 500px; border: 1px solid red;"> <div style="position:absolute;right:0px;bottom:0px;width: 200px; height: 100px; border: 1px solid green;"> </div> </div> Give that a try. Short version: position:relative on the outer div, position:absolute on the inner div and tell it you want the inner div to be 0 pixels from the right and bottom edges of the parent container.
31
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
