Right image in table not resizing

Question

I have a table with 7 cells, 4 contain images and 3 function as spacing. The image cells do not have a width but the spacing cells do.

|image| |image| |image| |image|

The container has a min and max width and the table width is 100%, I want the images to resize with the table cells so that the spacing cells stay the same but the images equally resize to fit the cell. I'm creating a partly responsive website that has a min width of 960px and a max width of 1070px, that's why the images need to resize.

The problem is: the last image in the table does not resize in IE & Firefox. It works fine in Chrome.

Here's my code: http://jsfiddle.net/hF5qY/

Anyone have an idea or a better way to do this with divs?

Answer 1

DEMO

it seems that % width on TD will resolve your problem

CSS

#container td {
    width: 24%;
}

Answer 2

I'll give you a few tips that might be useful when choosing a Responsive Design.

In this case, you could wrap the images within li's, setting the li's to around 23-24%. Then, you leave the img with 100% width and height:auto. The remaining % will be used for the 'spacing cells' you mentioned.

Try something like this:

ul {
    max-width:1070px;
    max-width:960px;
}

li {
   width:23%;
   margin-right:2.66%

}
li:last-child {
   margin-right:0;

}
img {
   width:100%;
   height:auto;
}

Hope it helps :)

Answer 3

well i have tried what you want with DIVS alone .... except for the spans .... its working with IE8 ....

here is my html

<div id="container">
            <div id="innercont">
                <div id="cont1" class="cont">
                    <a href="samen-doen.html"><img src="http://i.imgur.com/frRYKmV.jpg" alt="Samen doen" width="100%" height="100%"/></a>
                </div>
                <div id="cont2" class="cont">
               <a href="samen-veilig.html"><img src="http://i.imgur.com/IgpVrBz.jpg" alt="Samen veilig" width="100%" height="100%"/></a>

                </div>
                <div id="cont3" class="cont">
                <a href="samen-gezond.html"><img src="http://i.imgur.com/TdUU0zZ.jpg" alt="Samen gezond" width="100%" height="100%"/></a>

                </div>
                <div id="cont4" class="cont">
                <a href="communiceren.html"><img src="http://i.imgur.com/KxVqQVu.jpg" alt="Communiceren" width="100%" height="100%"/></a>

                </div>
            </div>
</div>

and this is my css ....

    #container {
    max-width: 1050px;
    min-width: 640px;
}
#innercont{
    width: 100%;
    height: 30%;
    position: absolute;
    top: 0;
    left: 0;
}
.cont{
    width: 24%;
    height: 100%;
    margin-right: 5%;
    z-index: 10;
}
#cont1{
    position: absolute;
    top: 0;
    left: 0;
}
#cont2{
    position: absolute;
    top: 0;
    left: 25%;
}
#cont3{
    position: absolute;
    top: 0;
    left: 50%;
}
#cont4{
    position: absolute;
    top: 0;
    left: 75%;
}

here is a fiddle Fiddle hope it helps

Answer 4

here's how i would do it with divs, this is the best option in my opinion: http://jsfiddle.net/hF5qY/10/embedded/result/

don't mind the #container this layout will adapt anywhere in the website. be sure you only have 4 image items, else you will need to adjust the .cell width.

hope this helps