CODEWITHSUNDEEP
htmlcss-float
Richard
Richard

Reputation: 4546

keep div floating to the left if browser window gets smaller

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>

Upvotes: 0

Views: 627

Answers (2)

qw3n
qw3n

Reputation: 6334

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

Upvotes: 0

Matt Mitchell
Matt Mitchell

Reputation: 41833

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.

Upvotes: 3

Related Questions