keep block elements horizontally

Question

how to keep block elements horizontally in a div without letting it to be overflowed. pals, i mean i have 4 div elements with the width of 100px in a div which has got 300px of width. all the 4 divs are floated to right but the last one is wrapped to the next line. i want it to keep being horizontally without being wrapped or overflowed. just be hidden html

 <div class="f">
    <div>one<\div>
    <div>two<\div>
    <div>three<\div>
 <\div>

css

 .f
 {
    width:300px;
    height:120px;
    background:yellow;
    overflow:hidden;
 }
 .f div
 {
    width:100px;
    height:100px;
    float:right;
    backgroud:green;
 }

guys by the way i want it to be like windows 8 start menu but I don't want to be scrolled. i wanna make scrollbar for it with js

Answer 1

Block elements always take up the full available width. What you want to use here is inline-block which are simply inline elements that accepts a height and width.

And for hiding overflow apply overflow:hidden

If you meant to scroll horizontally by mentioning win-8, apply

white-space:nowrap for the container as in this fiddle:

JSFiddle