I have rows of photo of same size shown, when you dont have sufficient number of photos in a row, the photo should expand in width to occupy full space. There can 3 inner divs or 4 inner divs.
// CSS Section
.cont {
position : absolute;
background : #E4EDF7;
border : 1px solid grey;
height: 200px;
width:400px;
}
.ibox {
float: left;
background : green;
margin: 5px;
border: 1px solid grey;
height: 50px;
width: 100px;
}
// HTML Markup
<div class="cont">
<div class="ibox"></div>
<div class="ibox"></div>
<div class="ibox"></div>
<div class="ibox"></div>
<div class="ibox"></div>
</div>
Ok, I did a little experimentation and came up with a quick solution to your autosizing issue:
.cont {
position : absolute;
background : #E4EDF7;
border : 1px solid grey;
height: 200px;
width:400px;
display:table;
}
within the "cont" class just add the last bit "display:table;" and the outer box should resize to the added contents.
Question is a little confusing but I'm assuming you would want all photos in a row to expand equally to fill the row if there are only 3 rather than 4...
So.. not knowing the exact number of .ibox divs (3 or 4), there is no easy/reliable way to achieve this with css alone (that i know of) unless you can use some css3 - The CSS 3 Flexible Box Model - which may not be an option if you require older browser compatibility.
With a bit of jquery it would be fairly quick e.g.
var container = $('.cont'),
iboxCount = container.find('.ibox').length,
photoWidth = container.width()/iboxCount; //TODO: adjust for margin/padding
container.find('.ibox').css('width',photoWidth);
Hope this helps.
Brains911 made a good point as to confusion on what you actually want. I interpreted your "the photo" as 1 photo (the last) expanding in width, which is the original answer below. However, if you want "the photos" (plural, all 3) to expand, then there is a CSS3 answer that I have added below.
Add this below your ibox
css:
.ibox:first-child + .ibox + .ibox:last-child {
width: 210px; /* 2 x width + 2 x margin */
}
It will only target the ibox
and change the width if there are 3 instead of 4. See the fiddle, where I had to modify the width
of your cont
to accommodate your margins, but you should get the idea.
Change your standard width in your .ibox
definition to what you want for 3 photos (in my example fiddle I used 137px
), then add this css for the 4 photo scenario:
.ibox:nth-last-of-type(4),
.ibox:nth-last-of-type(4) ~ .ibox {
width: 100px;
}
It counts backwards from the end and if there are 4, it will trigger the styling for 4 instead of the default 3.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With