Question

I have coded a site with a simple horizontal “nowrap” css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url

Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.

I tried using max-width:100% with both width and height in auto. It not working.

I try using jquery fluid images script, they are not working as well due to “nowrap”

Below are the main code i am using:

#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

This is the link of my project: http://credencepartners.com/demo02/

This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg

Do i need to implement javascript on this or CSS is possible for this scenario?

---

UPDATES / 10th Aug 2012

Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.

---

GOALS

Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me 🙂

Answer 1

Use this CSS:

body, html {
    width:100%;
    min-height:100%;
    height:auto !important;
}
#content {
    width:100%;
    height:100%;
    position:relative;
}
#portfolio {
    width:100%;
    height:100%;
    position:relative;
}
#portfolio ul{
    width:100%;
    height:100%;
    display:block;
    white-space:nowrap;
    overflow:auto;
    list-style:none;
    padding:0;
    margin:0;
    text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
    width:auto;
    height:100%;
    display:inline-block;
    position:relative;
}

And lay out your html like this:

<div id="content">
    <div id="portfolio">
        <ul>
            <img src="src.jpg" />
            <img src="src.jpg" />
            <img src="src.jpg" />
        </ul>
    </div>
</div>