Question

I’m working on a design for mobile devices similar to this one: http://jsfiddle.net/rdCdx/

I need to meet these requirements:

• [edit] fit the image on the left to match the height of the space between top-menu and bottom-menu
• preserve the aspect ratio of the image on the left.
• have the #products-list div occupy the rest of the #content‘s width (right now I’ve hard coded a value there, this isn’t fluid and this won’t work on different devices)
• have the .button float right and occupy a percentage(say 10%) of the .product‘s width

How can this be accomplished?

Edit: The point where I am stuck is that I cannot think of a way to make the element on the right, namely the #products-list element, to have a width equal to the width of the screen minus the width of the image.

what have you tried?

I can’t think of any good way to make progress towards my requirements given the knowledge that I have. Also, I haven’t seen something like this done anywhere else.

Answer 1

You could use the HTML… This will preserve the aspect ratio but will scale the image up to whatever height it needs for the width to be 50% of the content container.

<style type="text/css">
    img { width: 50%; float: left; }
    #product-list { width: 50%; float: right; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }
</style>
<div id="content">
    <img src="http://balloonraces.homestead.com/balloon.jpg"/>
    <div id="product-list">
        <div class="product">
            <a class="button">Button</a>
        </div>
    </div>
</div>

Or, the following retains the size of the image and the product list will take up the remaining space.

<style type="text/css">
    img { width: 200px; float: left; }
    #product-list { margin-left: 200px; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }
</style>

You can specify more complex behaviour by determining the stops where you want one to start behaving like the other, say you want the latter example up until the point there is a 1:1 ratio between the two and scale down using media queries.

<style type="text/css">
    img { width: 200px; float: left; }
    #product-list { margin-left:  200px; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }

    @media screen and (max-width: 400px) {
        img { width: 50%; }
        #product-list { width: 50%; float: right; margin: 0; }
    }
</style>

Anything more complex than that will likely involve JavaScript.

Edit as you have changed the conditions of your question, you want the image to always be 100% of the height, this answer no longer holds true. Instead use the following CSS…

<style type="text/css">
    img { height: 100%; float: left; }
    #product-list { overflow: hidden; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }
</style>