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 float
and 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
How to Reset 'Display' Property for Flex-Item
@Media: If Samsung Galaxy S4 Is 1920X1080
CSS3 Flexbox Full-Height App and Overflow
Is Browser Prefix Still Required for Linear-Gradient
How to Center a Button in Material-Ui
How to Format CSS for 8.5X11 Inch Printed Pages
Vaadin - Coloring Table Cells Based on Content
Overflow (Scroll) - 100% Container Height
Divide Width of Element Between Child Divs with CSS
How to Remove Unused Styles from Twitter Bootstrap
Color "Transparent" Not Working
Using Proper CSS Media Queries in Angular
How to Add a Svg as Content on: Before Pseudo Element of an Element