Struggling to confine a square within specific size constraints while keeping it neatly aligned within the parent container. Balancing these requirements has proven challenging.
The layout consists of a main div with two columns on the left and a div occupying the remaining space on the right. The goal is to have the square contained within the right div, staying within its bounds. Although I can prevent it from moving when not using padding-bottom for square dimensions, the image quality suffers.
Please review my js bin. To access the square, follow this path: Weapons -> item b1 -> click to stabilize.
Adding padding-bottom causes the square to shift downwards, expanding beyond the parent container and disrupting the layout entirely.
CSS:
.itempanel{
display: block;
align-items: center;
position: relative;
}
.itemcontainer{
position: relative;
top: 30%;
height: 60%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.itemdisplay{
display:none;
flex-direction: column;
width: 60%;
padding-bottom: 60%;
margin-left: auto;
margin-right: auto;
position: relative;
align-items: center;
overflow: hidden;
}
/* .itemdisplay::after{
content: " ";
display: block;
padding-bottom: 100%;
} */
HTML:
<div class="itempanel">
<div class = "itemcontainer">
<div id="itemdisplay" class="itemdisplay">
<img id="itemimg" class="itemimg" src=""></img>
<div id="itemdesc" class="itemdesc">
<div id="itemtitle" class="itemtitle"></div>
<div id="itembody" class="itembody"></div>
<a id="itemclick" class="itemclick" href="">Click To Place Order</a>
</div>
</div>
</div>
</div>
Any assistance would be greatly appreciated!
* A bit of context - planning a Skyrim-themed wedding at my girlfriend's request, so creating an RSVP website. Belethor's shop will cater to non-gamers interested in affordable cosplay outfits. Everything else is functioning as desired, except for the placement of itempanel/itemcontainer/itemdisplay within the designated area.