Menu
I have a main DIV with fixed height and width, and in that I want have lots of small DIV's to float freely. I have more small DIV's than can fit in the main DIV. Then it seems that by default is disappear small DIV's down outside the main DIV. I want them instead to disappear to the right.
I want to trigger a horizontal scrollbar, but no vertical.
I tested this with white-space: nowrap as described at http://www.webmasterworld.com/forum83/8844.htm
And it works perfect if I have only text or images in the main DIV.
But how do I do when the main DIV contains only small DIV's?
517
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.
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.
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
I have done this using jQuery, HTML and CSS:
<div id="overflow">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
#overflow{
border: 1px solid #000;
height: 220px;
width: 220px;
overflow-x: scroll;
overflow-y: hidden;
}
#overflow .container div{
border: 1px solid #CCC;
float: left;
width: 200px;
height: 200px;
}
$(function(){
var width = 0;
$('#overflow .container div').each(function() {
width += $(this).outerWidth( true );
});
$('#overflow .container').css('width', width + "px");
alert(width);
});
});
Basically the div can not use a fluid width in CSS as width is applied inherently from the parent div.
Using some jQuery code you can attach the width to the containing div easily.
Here is the fiddle with the final code.
Use a fixed width on the container div i.e. #overflow .container { width : 1880px }
149
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>
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
