I have a div with some content, a bunch of thumbs, I'd like them to always be horizontal and any overflow gets scrolled horizontally. I'd like the div to take up 100 percent width, keeping the thumbs a group centered, meaning when the page is wider then the group they stay centered and not stuck to the left. I have a jsfiddle and can't seem to figure out why it's not working, it always pushes the overflow into a second row instead of allowing the overflow feature to take over.
http://jsfiddle.net/z5nEQ/1/ that's the fiddle and the code in that is:
css:
#wrapper{
width:100%;
height:90px;
border:1px solid red;
}
.box{
width:50px;
height:100px;
border:1px solid black;
float:left;
}
#container{
width:100%;
height:200px;
float:left;
overflow-x:scroll;
}
html:
<div align="center" id="wrapper">
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
any thoughts on this? Thanks for any help
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.
The HTML <marquee> tag defines a scrolling text area in the HTML document that moves across the page in a horizontal or vertical direction. By default, text found within the <marquee> tag will scroll from right to left.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Write like this:
.box{
width:50px;
height:100px;
border:1px solid black;
display:inline-block;
*dsplay:inline;/* For IE7*/
*zoom:1;/* For IE7*/
white-space:normal;
}
#container{
width:100%;
height:200px;
float:left;
overflow-x:scroll;
white-space:nowrap;
}
Check this http://jsfiddle.net/z5nEQ/3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With