How would one make it so that divs do not stack upon one another based on browser window size or screen resolution when divs are floated to the left?

Question

Sorry if my wording is... unclear. I really had no idea how to properly explain my dilemma. But lets seen if I can do it better here...

I am making a blog in which posts will be displayed and scrolled through horizontally, rather than vertically. Each blog post is displayed in a separate div, and the divs are displayed side by side by floating them to the left.

But based on the resolution of one's computer, or the size of the window one is viewing the page in, the divs will stack on top of one another instead of displaying side by side as I intended. Of course, if the screen resolution was large enough to display every div it would work wonderfully, but it's not.

I appreciate any help, tips, and pointers I can get. Thank you very much.

Edit And as far as code goes, this is the basic HTML structure and CSS I am using:

<div class="post">Post Content</div>
<div class="post">Post Content</div>
<div class="post">Post Content</div>
<div class="post">Post Content</div>
<div class="post">Post Content</div>

.post {
     float: left;
     margin-top: 74px;
     margin-left: 50px;
     margin-right: 50px;
}

Answer 1

Have you tried putting your divs inside a container div with overflow:scroll?

For example:

<div id="container" style="overflow:scroll; height: 100px; width: 500px;">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>

If this doesn't answer your question, then perhaps you could show us your existing markup/CSS so we can see exactly what you're trying to achieve.