Is it possible to keep this text inside the div that has position absolute set?

Question

I'm creating a web map. I have a div at the top of the map that when clicked maximizes and shows a custom attribute window. The attribute window displays data based on other actions in the map. The attribute window currently has 4 buttons at the top that will change the contents of the window depending on which button is selected.

The actions on the map will send a request to my Python flask web service which returns data formatted in <ul><li></li><ul> that I want to display in the attribute window.

The problem I currently have is that the text goes outside the the window - probably because I have the div set to position: absolute. But is there any way around this?

Here is a working CodePen (click the div at the top):

https://codepen.io/anon/pen/oeJGdm

Thank you for any advice.

Answer 1

Keeping your structure i would suggest few changes, I'm including only the changes in this answer.

First give room for .nav in #atributeWindow.

#attributeWindow { 
padding-top: 30px; /*to accomodate nav bar*/
...
}

Move nav to top padding area of #attributeWindow.

.nav{
top: 0;/* to place at top;*/
...
}

Contents will be placed below .nav since padded in #attributeWindow. So remove this padding.

.attributeContent{
/*padding-top:30px; remove this padding.*/
...
}

Finally remove the display:inline

#test1{
/*display: inline;*/
...
}