Stop wrapping contained divs?

Question

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!

Your fiddle uses .element instead of #element so it doesn't work. Can you fix up please? — mrtsherman, Mar 22 '11 at 20:00
Han's answer looks like the best one to me. Fiddle is here. Nobody else got the horizontal scrolling that you want. http://jsfiddle.net/mrtsherman/vZWTc/1/ — mrtsherman, Mar 22 '11 at 20:03

score 20 · Accepted Answer · answered Mar 22 '11 at 19:57

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; }

score 1 · Answer 2 · answered Mar 22 '11 at 19:51

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 {
   ...
}

score 1 · Answer 3 · answered Mar 22 '11 at 19:51

Divs are block level elements - which means they create a new line. If you want block level elements next to eachother then they will need to be floated with float:left or float:right. Remember to clear them with clear: both when you want stuff to start going onto new lines.

To prevent them from wrapping you can use the overflow: parameter.

I would also suggest using the CSS direct child selector instead of specifying the same class element over and over again. div.container > div { color: red; }

score 0 · Answer 4 · edited Aug 16 '12 at 14:10

0

You can just set height: like so

.container { width:200px; height:20px; overflow-x:auto; overflow-y:hidden; }
.element { width:100px; height:20px;  float:left; }


<div class="container">
<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>

edited Aug 16 '12 at 14:10

rene

41,474
78
114
152

answered Mar 22 '11 at 19:53

Bryan Thomas

142
3

score 0 · Answer 5 · answered Mar 22 '11 at 20:04

Firstly for these fields to use those CSS styles - they would need to be #container and #element respectively. Either that or change it to use a wrapping div to handle the scrolling.

Markup:

<div id="container">
<div class="wrappingcontainer">
    <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>

CSS:

    #container { width:200px; overflow-x:auto; overflow-y:hidden; }
   .element { width:100px; float:left; }
   .wrappingcontainer{ width: 400px; }

Demo available here!

Stop wrapping contained divs?

5 Answers5

Linked