Seems the bottom div is aligned bottom to the page but not to the container div. I need to align the bottom one to the bottom of the container DIV.
Code:
#container { border: 1px solid red; height: 300px; } #top { border: 2px solid red; display: inline-block; vertical-align: top; position: absolute; top: 0; } #bottom { border: 2px solid red; vertical-align: bottom; width: 100px; position: absolute; bottom: 0; }
<div id="container"> <div id="top"> test<br /> test <br /> test <br /><br /> test test test test<br /> </div> <div id="bottom">bottom</div> </div>
Simply give your #container position:relative;
#container { border: 1px solid red; height: 300px; position: relative; } #top { border: 2px solid red; position: absolute; top: 0; } #bottom { border: 2px solid red; width: 100px; position: absolute; bottom: 0; }
<div id="container"> <div id="top"> test<br /> test <br /> test <br /><br /> test test test test<br /> </div> <div id="bottom">bottom</div> </div>
Alternatively you could go with flexbox :
#container { border: 1px solid red; height: 300px; position:relative; display: flex; /* add this */ } #top { border: 2px solid red; position: absolute; top: 0; } #bottom { border: 2px solid red; width: 100px; align-self: flex-end; /* and this */ }
<div id="container"> <div id="top"> test<br /> test <br /> test <br /><br /> test test test test<br /> </div> <div id="bottom">bottom</div> </div>
You're almost there, #container
has to be position: relative;
Absolute is always to the closest relative element. In this case you have no relative elements, so it will default to body
. By giving #container
the relative value, #bottom
will be positioned relative to #container
#container {
position: relative;
border: 1px solid red;
height: 300px;
}
All you need to set its parent position:relative
then it will consider its body.
#container {
border: 1px solid red;
height:300px;
position:relaive;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.