Autoexpand and Autoshirink of div?

Question

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>

Answer 1

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.

Answer 2

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.

Answer 3

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.

Original Answer (CSS2: Last photo only expands)

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.

Additional Answer (CSS3: All 3 photos expand)

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.