I'm having trouble with my layout - specifically, I have one container with four columns. It looks fine when I manually set the image sizes in each column, but I want to use percentage widths for more flexibility. However, when I do this, the images end up expanding to the width of the main container rather than staying within their respective columns.
The issue seems to be related to the CSS near the bottom.
You can view a demo on CSS Desk:
Here's the HTML:
<div id=maincontent>
<div id="shop-panels" class="flexcontainer">
<div class="panel" id="panel1">
<div class="content">
<img src="https://s24.postimg.org/dn7cdoifp/sedan.jpg"/>
</div>
<div class="caption">
Shop Sedans
</div>
</div>
<div class="panel " id="panel2">
<div class="content">
<img src="https://s1.postimg.org/ujt0z038v/truck.jpg" alt=""/>
</div>
<div class="caption">
Shop Trucks
</div>
</div>
<div class="panel " id="panel3">
<div class="content">
<img src="https://s24.postimg.org/w16ku1ymt/minivan.jpg" alt=""/>
</div>
<div class="caption">
Shop Minivans
</div>
</div>
<div class="panel " id="panel4">
<div class="content">
<img src="https://s22.postimg.org/6gw49w8gh/suv.jpg" alt=""/>
</div>
<div class="caption">
Shop SUVs
</div>
</div>
</div>
</div>
And here's the relevant CSS:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}
div#maincontent {
width: 980px;
background: #FFF;
height: 100%;
margin: auto;
padding: 1em;
box-sizing: border-box;
}
#shop-panels {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
#shop-panels div.panel {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
height: 200px;
border-radius: 1em;
margin: .5em;
padding: 1em;
background: #A00;
background: -webkit-linear-gradient(rgba(200,0,0,1),rgba(127,0,0,1));
background: -moz-linear-gradient(rgba(200,0,0,1),rgba(127,0,0,1));
background: linear-gradient(rgba(200,0,0,1),rgba(127,0,0,1));
}
#shop-panels div.panel:first-child {
margin-left: 0;
}
#shop-panels div.panel:last-child {
margin-right: 0;
}
#shop-panels div.panel:hover {
background: #C00;
}
#shop-panels div.panel .content {
background: #FFF;
border-radius: 1em;
height: 150px;
overflow: hidden;
text-align:center;
}
#shop-panels div.panel .content img {
position: relative;
/* THIS IS THE CULPRIT RIGHT HERE */
width: 100%;
/* IF THIS VALUE IS 190px, EVERYTHING'S FINE. */
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#shop-panels div.panel > .caption {
color: white;
text-align: center;
font-weight: bold;
font-size: 1.5em;
margin: .7em 0;
text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}