I'm currently facing an issue with my CSS. Apologies for the vague title, but I'll do my best to explain it here. My problem lies within a parent wrapper div that is centered on the page. Within this wrapper, there is another child div containing images. The trouble arises because I have the child div set to width:auto, causing it to always match the full length of the parent div. What I actually want is for the child div to scale automatically based on the content inside it, allowing me to center it within the parent div. To better illustrate, take a look at this image:
enter image description here
In the image, you can see the grey section representing my parent div (wrapper) and the red section depicting my child div (gameswrapper). I aim for gameswrapper to adjust its size based on the game pictures inside it.
Here is a snippet of my CSS:
#wrapper {
background: #ddd;
width: 70%;
max-width: 70%;
margin: auto;
padding: 10px;
font-family: 'CaviarDreamsBold';
}
#gamesdisplay {
display:block;
}
#searchdisplay {
display:block;
}
.artwork {
margin: 6px;
width: 150px;
height: 230px;
background: #666;
display: inline-block;
cursor: pointer;
}
And here is part of my HTML:
<div id="wrapper">
<div id="gamesdisplay" style="overflow:auto; width:auto; background:red;">
<a href=''><div class="artwork" style="background: url('')"></div></a>
If anyone has a solution to this issue, please share your insights!