I'm encountering an issue with a div not extending properly, causing two other divs to overlap. I've managed to position the divs correctly, but now I need the "100% all beef weenies" text to appear below the items. Any suggestions on how to achieve this would be greatly appreciated. I'm considering adding an outer div around the inner divs, but I'm unsure if that's the right approach.
Here is the current code:
<div class="page2">
<h2 class="wegottheweenies">WE GOT THE WEENIES</h2>
<div class="weeniespaper">
<div class="paperitems">
</div>
</div>
</div>
And here is the accompanying CSS:
.weeniespaper {
background-image: url('../pictures/weenies/longpaper.png');
height: auto;
column-count: 2;
column-fill: balance;
background-repeat: repeat-y;
-webkit-background-size: cover;
-moz-background-size: cover;
position: relative;
}
.items {
width: 95%;
margin-left: 30px;
font-size: 1.150em;
margin-top: 10px;
margin-bottom: -15px;
}
.itemTitle {
font-weight: bold;
float: left;
width: 80%;
}
.itemPrice {
float: left;
width: 15%;
}
.itemDescription {
margin-right: 30px;
}
.items {
width: 85%;
}
.h2 {
font-family: 'Amatic SC', cursive;
color: yellow;
}
.wegottheweenies {
position: relative;
top: 5vh;
text-align: center;
}
#allbeefweenies {
position: absolute;
font-weight: bold;
padding-left: 30px;
font-size: 1.125em;
left: 0;
bottom: 0;
}