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>


Related Topics



Leave a reply



Submit