CODEWITHSUNDEEP
htmlcss
Adyyda
Adyyda

Reputation: 335

2 rows, first on top and second on bottom of parent

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

The structure is

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

You can see olso a jsfiddle here

Any idea how to do it? Thanks

Upvotes: 5

Views: 104

Answers (3)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You wrote that bottom cannot have absolute positioning, but you didn't say the same about top.

In that case, you can use these styles:

#top {
  position: absolute;            //so top won't affect bottom's placement
}

#bottom {
  position: relative;            //relative to container
  top: 100%;                     //height of container ...
  transform: translateY(-100%);  //... minus height of bottom element
}

Fiddle

Upvotes: 0

Julia
Julia

Reputation: 1321

If it's possible to change HTML, you can use display: table for container and display: table-cell for additional container, then you can vertically align the content. To make first li stay at top, there can be used 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>

Fiddle demo: http://jsfiddle.net/3bsa7hco/1/

Upvotes: 2

Jesse
Jesse

Reputation: 1262

You can do this using 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;
}

Upvotes: 3

Related Questions