I currently have a setup of divs within a container div, as follows:
<div id="container">
<div id="element"> Element 1 content </div>
<div id="element"> Element 2 content </div>
<div id="element"> Element 3 content </div>
<div id="element"> Element 4 content </div>
</div>
style.css:
.container {
width:200px;
overflow-x:auto;
overflow-y:hidden;
}
.element {
width:100px;
float:left;
}
Here's a jsFiddle of the code: http://jsfiddle.net/vZWTc/.
So, I would like each of the elements to line up next to each other (all 4 in one row), but only have the first two visible (container is 200px, each element is 100px, so only 2 are visible at a time), while the user can scroll (horizontally) to the 3rd and 4th elements (as they are less important)
However, with this setup, elements 3 and 4 wrap down to the next line
updating the container class with white-space:nowrap
does nothing. That only affects text, not divs apparently.
Any ideas? Thanks in advance!
Use a wrapper div with the total width of the 4 elements, and set the container to hidden overflow, html example...
<div class="container">
<div class="wrapper">
<div class="element"> Element 1 content </div>
<div class="element"> Element 2 content </div>
<div class="element"> Element 3 content </div>
<div class="element"> Element 4 content </div>
</div>
</div>
and for the css
.container { width:200px; overflow-x:auto; overflow-y:hidden; }
.wrapper { width: 400px; }
.element { width:100px; float:left; }
There are two methods:
1) Clearfix - added to the container.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
2) Clearing DIV - placed after the last floating element.
<div class="clear"></div>
.clear {
clear:both;
font-size:0;
}
You can save some markup in your situation be using an unordered list instead:
<ul id="container">
<li> Element 1 content </li>
<li> Element 2 content </li>
<li> Element 3 content </li>
<li> Element 4 content </li>
</ul>
This way you can style the contents without and extra class name. It makes more semantic sense as well.
.container li {
...
}
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