Menu
I'm creating a series of columns all floated left against eachother. I'd like to make it so that when the columns are larger than their container a horizontal scrollbar appears instead of the columns dropping down. Here's what I have...
<body>
<div id="container">
<div id="col1" class="col">Column One</div>
<div id="col2" class="col">Column Two</div>
...
</div>
</body>
With the css:
body { width: 100%; height: 100%; overflow: auto; }
#container { width: 100%; height: 100%; }
.col { float: left; width: 250px; height: 100%; }
I would ideally like to have the scrollbar on the page/body level since the page is nothing but the columns.
858
It will work with this CSS :
#container { width: 100%; overflow: auto; white-space: nowrap; }
.col { display: inline-block; width: 250px; }
Caution : display-block not working on IE <= 7
An other solution is to use two containers and fix the width of the second with the sum of columns width :
#container1 { width: 100%; overflow: auto; white-space: nowrap; }
#container2 { width: 1250px; }
.col { float:left; width: 250px; }
<div id="container1">
<div id="container2">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
<div class="col">Column 4</div>
<div class="col">Column 5</div>
...
</div>
</div>
If you want the scrollbar on the body, just remove overflow:auto on #container and #container1
96
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
