Question

I’m creating a full-screen design where:

• Top % Bottom bars are a specific height, but 100% width
• Middle Left Bar is specific width but 100% height
• Middle right bar takes up space of whatever is left

I’m trying to create an “options” div that would pop up from the bottom right bar, overlaying my map on the middle-right side.

However, by looking at my code, you can see that what I did makes the options div start at the bottom div and goes downward. Furthermore, I gave it a 100% width, but it did not adapt the width of its container, but the width of the screen.

#options {
    position: absolute;
    background: #39E023;
    width: 100%;
    height: 200px;
    text-align: right;
}

Thanks guys!

Answer 1

Give your div a margin-top which is equal to the height, negative:

#options {
    position: absolute;
    background: #39E023;
    width: 100%;
    height: 200px;
    text-align: right;
    margin-top: -200px;
}