CSS: Series of Floated Elements Without Wrapping But Rather Scrolling Horizontally

CSS: series of floated elements without wrapping but rather scrolling horizontally

How about using display: inline-block this way you can use borders on the block elements and get the horizontal scroll bar.

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    white-space: nowrap
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline-block;
}

CSS non-wrapping floating divs

Use display: inline-block instead of floatand give the container white-space: nowrap.

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Here an example: http://jsfiddle.net/D5hUu/3/

How to make a horizontal scroll for left-floating children?

The best approach would be setting the elements to inline-block, and then using white-space: nowrap to prevent them from breaking to a new line. Aside from that, you were missing a semi-colon after overflow-x:scroll.

jsFiddle example

.element {
    width:30%;
    height:50px;
    background-color:#0f0;
    display:inline-block;
    margin-right:3px;
    white-space: nowrap;
}

If you absolutely have to use floating element, you would essentially have to wrap the elements with another element, which has a larger width.

How to get Floating DIVs inside fixed-width DIV to continue horizontally?

div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.

How can I prevent floated div elements from wrapping when the browser is re-sized?

Wrap them in another div, which has a width (or min-width) specified.

<div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

It also helps to have overflow: auto specified on the containing div, to allow its height to match the child floats.

On a web page, How can i create a horizontal scroll instead of having this wap to the next line?

Simply place your span elements in a container:

<div>
    <span>...</span>
    <span>...</span>
    ...
</div>

Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:

div {
    white-space: nowrap;
}

div span {
    display: inline-block;
    width: 280px;
}

If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:

<div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    ...
</div>

Horizontal scroll in DIV with many small DIV's inside (no text)

Wrap your smaller divs in a third div that has a greater width than your main div like so. Assuming I understood your question correctly no jquery is needed.

<html>
    <head>
        <style type="text/css">       
            .div_1
            {

                height: 350px;
                width: 350px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_3
            {
                float: left;
                height: 350px;
                width: 500px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_2
            {
                height: 100px;
                width: 100px;
                border: 1px solid #A2A2A2;
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="div_1">
            <div class="div_3">
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
            </div>
        </div>
    </body>
</html>

CSS: Series of Floated Elements Without Wrapping But Rather Scrolling Horizontally