Simple code snippet:
<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>;
CSS for formatting:
.horizontal {
overflow-x:scroll;
clear:both;
}
.horizontal p {
float:left;
width:500px;
padding:0 20px 20px 0;
}
.horizontal p.image {
width:1024px;
}
I am trying to create horizontal frames similar to the mockup below without using actual frames.
Right now, the images do not float within .horizontal because of its width being set at 100% inside #page-wrap. They appear underneath each other instead of side by side. I want all images to be aligned horizontally within .horizontal with separate scrollbars for scrolling through the images.
;Any solutions on how to achieve this?
;Additionally, I need help with implementing scrollbars and making sure .horizontal only appears when there is content to be scrolled (i.e., if no images are present, the scrollbar should not appear).
;Your assistance would be greatly appreciated!
;By the way, jQuery is part of my project. Can this be achieved solely with JavaScript?
;