html + css: horizontal scroll lanes?

Question

really simpel markup:

<div id="page-wrap">

    <div class="post horizontal">

        <h2>Headline 01</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

    <div class="post horizontal">

        <h2>Headline 02</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

</div>

my css looks like this:

.horizontal {
    overflow-x:scroll;
    clear:both;
}

.horizontal p {
    float:left;
    width:500px;
    padding:0 20px 20px 0;
}

.horizontal p.image {
    width:1024px;
}

I have no idea how I can create horzizontal "frames" like the mockup beneath without using actual frames.

Right now, the images do not float because the with of .horizontal is 100% inside of #page-wrap. So they are aligned underneath each other. I want all images to be side by side within .horizontal. Each lane should have a seperate scrollbar that lets me scroll through the images.

I want to create this:

Any idea how to solve this?

Moreover I have a few more things I don't know how to solve... e.g. the scrollbars or each .horizontal should just appear if there is actual content that has to be scrolled (if there are no images the scollbar shouldn't be there)

thank you for your help

btw. I'm using jquery in my project, is this only possible with js?

Answer 1

From the mockup you have posted, I gather this:

1. Even though the markup has each image in its own paragraph, you want them to be displayed inline, within the same line.

2. You want that container to have a horizontal scroll bar.

3. The images should use said scroll bar, by not wrapping onto multiple lines when their total width grows above the width of the container.

Such layout can be implemented using CSS like this:

.horizontal p.image {
    display: inline;         /* 1 */
}

.entry {
    overflow-x: scroll;      /* 2 */
    white-space: nowrap;     /* 3 */
}

Here's a demo using the above CSS with your markup (width/height constraints on images dropped to make it display better in a small window): http://jsfiddle.net/TT9hq/

Replace overflow-x: scroll with overflow-x: auto if the scroll bar is only to show up when there are (wide) enough images to require a scroll bar.