How to align divs horizontally withput letting them fall down when the page border is reached?

I have this problem. I would like to create a page showing/displaying a series of items in horizontal flow. It means that I want them to align horizontally, but they have to stay in a horizontal line even if they reach the border of the page (yes, I want the horizontal scrollbar to eventually display, it does not bother me, on the contrary, it is needed.).

NOTE: Please, 开发者_StackOverflow中文版accordingly to recent design models, please I would like to avoid using tables... just divs...

How can I achieve this?

Place them all inside a white-space:nowrap container.

 <style type="text/css">
 .container {white-space:nowrap; height: 20px; }
 .content{float:left;border: 1px solid black; width:100px;}
 </style>

 <script type="text/javascript">
   $().ready(function() {
    var containerwidth =0;
    $(".content").each(function(){containerwidth = containerwidth +$(this).width()+10;});
    $(".container").width(containerwidth );
    });
 </script>

 <div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
 etc.
 </div>

The answer by Senad will still wrap if you reduced the width of the browser window.

What you want is white-space:nowrap; in your css so that text is not wrapped

HTML:

<ul>
  <li>Element</li>
  <li>Element</li>
  .
  .
  .
</ul>

CSS:

li { display: table-cell; }