2 lines, first on top and second on the bottom of the parent

Question

I have an absolute container (should remain absolute), with a fixed height, and I need to place 2 li inside, one on top and one on the bottom. Both li have a variable height, and I should not use the absolute position for the bottom (we will break something in the menu).

Structure

<div id="container"> <div id="top"> top variable height </div> <div id="bottom">bottom variable height</div> 

You can see olso jsfiddle here

Any idea how to do this? Thanks

Answer 1

You can do this using the Flex property.

Fiddle: https://jsfiddle.net/9vq8nkpc/

HTML

 <div id="container"> <div id="top"> top variable height </div> <div id="bottom">bottom variable heighbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightt</div> </div> 

CSS

 #container { border: 1px solid red; height: 200px; position: absolute; display:flex; flex-direction:column; justify-content:space-between; } #top, #bottom { border: 2px solid red; background: #ccc; width:80%; display: inline-block; } 

Answer 2

If you can change the HTML, you can use display: table for the container and display: table-cell for the additional container, then you can vertically align the content. To make your first stay on top, you can use absolute positioning.

 #container { border: 1px solid red; height: 200px; width: 90%; position: absolute; display: table; } #top, #bottom { border: 2px solid red; background: #ccc; width:80%; display: inline-block; } #top{ position: absolute; top: 0; left: 0; } .table-cell{ display: table-cell; vertical-align: bottom; } 

 <div id="container"> <div class="table-cell"> <div id="top">top variable height</div> <div id="bottom">bottom variable height</div> </div> </div> 

Demo screenshot: http://jsfiddle.net/3bsa7hco/1/

Answer 3

You wrote that bottom cannot have absolute positioning, but you did not say the same about top .

In this case, you can use these styles:

 #top { position: absolute; //so top won't affect bottom placement } #bottom { position: relative; //relative to container top: 100%; //height of container ... transform: translateY(-100%); //... minus height of bottom element } 

Fiddle