float left resizing images 100% whit parent

Question

I am working on a mobile version of a website. On a certain page you have three images on the left and when you click on it, you will see the image in big on the right.

When you resize the window, the three images on the left will become bigger in resolution. What I want to accomplish is that the image on the right should have the same height as the three on the left together.

So the blue and the green divs should have the same height when you resize the window.

You can find my code here or below

<div id="outer">
    <div id="inner1">
        <ul>
            <li>
                <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
            </li>
            <li>
                 <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
            </li>
            <li>
                  <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
            </li>
        </ul>
    </div>
    <div id="inner2">
        <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
    </div>
    <div style="clear: both;"></div>
</div>

Styles

#outer{
    border: 1px solid red;
    width: 100%;
}

#inner1{
    border: 1px solid blue;
    width: 30%;
    float: left;
    margin-right: 20px;
}

#inner1 img{
    width: 100%;
}

#inner2{
    border: 1px solid green;
    width: 100%;
    height: 100%
}

ul{
    list-style-type: none;  
}

Thank you!!

score 1 · Accepted Answer · answered Sep 19 '13 at 18:32

here's a Working Fiddle Tested on: IE10, IE9, IE8, IE7, FF, Chrome, Safari

FYI: I also fixed the 100% width issue you had in the inner1 div images. (it was caused by the ul-li default margin)

HTML: (removed your clear:both; div)

<div id="outer">
    <div id="inner1">
        <ul>
            <li>
                <img src="http://placekitten.com/50/50" />
            </li>
            <li>
                <img src="http://placekitten.com/50/50" />
            </li>
            <li>
                <img src="http://placekitten.com/50/50" />
            </li>
        </ul>
    </div>
    <div id="inner2">
        <img src="http://placekitten.com/50/50" />
    </div>
</div>

CSS:

* {
    padding: 0;
    margin: 0;
}
#outer {
    border: 1px solid red;
    position: relative; /* new */
}
#inner1 {
    width: 30%;
    border: 1px solid blue;
    display: inline-block; /*instead of the floating*/
}
ul {
    list-style-type: none;
}
#inner1 img {
    width: 100%;
}
#inner2 {
    border: 1px solid green;
    width: 60%;
    position: absolute;
    top: 0; /* stretchs from the beginning of the parent .. */
    bottom: 0; /* ..to the end. */
    right: 0; /*instead of float:right */
}

float left resizing images 100% whit parent

1 Answers1