Prevent floating divs from falling to the next line

Question

I am looking to create a viewer consisting of an arbitrary number of horizontally aligned divs, where only 3 are visible at any given time.

<div id="viewport"> <div id="slides"> <div>Content 1</div> <!-- not visible --> <div>Content 2</div> <!-- visible --> <div>Content 3</div> <!-- visible --> <div>Content 4</div> <!-- visible --> <div>Content 5</div> <!-- not visible --> <div>...</div> <!-- not visible --> </div> </div> 

My approach is to have a parent div ("viewport") with a fixed width / height and overflow: then hide its child div ("slides"), which has the actual content in its child divs, left or right.

For this to work, I need the child divs of the “slides” to be horizontally aligned, not one of them wrapped below, which will happen by default. I succeed when I know and specify the cumulative width of the children of the "slides" div in CSS, but I will dynamically add / remove them in JS. I would like to avoid having to constantly change the width of the “slides” of the div through JS, and rather just learn how to do this in CSS.

In short, how can I prevent a series of divs from wrapping below if the total width is unknown?

Answer 1

I think http://jsfiddle.net/5JHW5/2/ is what you want. It uses jQuery to determine the width of #slides and sets its width accordingly. I also added some scroll controls, simply because I like to do such things. If you need to see more in the example I gave, let me know.

Hooray!

Answer 2

The trick is to set #slides to a sufficiently large width that you never have to worry about, and then chop it off to the desired width using the #viewport div, as shown in this script . Just by adjusting the value of left #slides , you can move the section bar left and right.

CSS:

 #viewport { width:300px; overflow:hidden; } #slides { width:1000px; position:relative; left:-150px; } #slides div { width:100px; height:100px; float:left; border:1px solid black; }​ 

Your HTML remains unchanged.

Answer 3

is an example of what you want.

 <div class="box"> <div class="div1">1st</div> <div class="div2">2nd</div> <div class="div3">3nd</div> <div class="clear"> </div> 

CSS

 div.box { background: #EEE; height: 100px; width: 600px; } div.div1{background: #999; float: left; height: 100%; width: auto; } div.div2{ background: #666; float: left;height: 100%; width: auto;height: 100%; } div.div3{ background: green; height: 100%; } div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; } 

Answer 4

If you set display: none to slides that should not be visible, they will not take up any space, and there is no need for a div container more than you need to hold your three visible slides. I added the shown class to the three slides to distinguish which ones are visible (you can switch this in javascript). Setting float=left to div#slides causes it to take up enough space to accommodate its children.

 <div id="viewport"> <div id="slides"> <div>Content 1</div> <!-- not visible --> <div class="shown">Content 2</div> <!-- visible --> <div class="shown">Content 3</div> <!-- visible --> <div class="shown">Content 4</div> <!-- visible --> <div>Content 5</div> <!-- not visible --> </div> </div> 

CSS:

 div#slides { float: left; } div#slides > div { float: left; width: 10em; height: 10em; margin: 1em; background-color: red; display: none; } div#slides > div.shown { display: block; }