keep div floating to the left if browser window gets smaller

Question

Hi,

I am trying to make some sort of timeline, but I can not keep the div floating horizontally.

I have a div container with overflow hidden. Inside the container I have divs floating to the left. Inside those div's are ul's with a fixed width.

If I resize the browser, I want the div to be gracefully cut off from the right side.

The current situation is that it floats underneath the previous one and leaving some ugly white space.

How can I maintain everything horizontally?

Any help is appreciated!

thanks in adv, Richard

EDIT

<STYLE>
    #bericht_container{ border: thin solid #000000; margin-left:20px; overflow:hidden; padding:10px;  width:900px;}
    DIV.bericht_maand{ float:left; margin-left: 20px; border: 2px solid #A0A0A4; }
</STYLE>

Answer 1

You have to wrap them in a div that is the minimum width you want your page to be.

E.g.

#wrapper { width: 900px; }

<div id="wrapper">
    ... Your current HTML ...
</div>

You cannot have the div "dissapear" off the edge with CSS, but you could have the page show a horizontal scrollbar when this happens.

Answer 2

I haven't tested it, but I think it should work if you set the div width to 100% and overflow hidden?