Prevent floating divs from dropping to next line

Question

I'm looking to create a viewer composed 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") of fixed width/height and overflow: hidden then to slide its child div ("slides"), which has the actual contents in its child divs, to the left or the right.

In order for this to work, I need the child divs of "slides" to be all horizontally aligned with none of them wrapping below, which will happen by default. I'm successful in doing this when I know and specify the cumulative width of the children of the "slides" div in CSS, but I will be dynamically adding/removing them in JS. I would like to avoid having to constantly change the width of the "slides" div through JS and would rather just find out how to do it in CSS.

So in short, how do I prevent a series of divs from wrapping below if the total width is unknown?

I believe this only allows it to grow to the size of its parent (in this case #viewport), which I need it to be wider than. Any ideas? — liamacheung, Feb 29 '12 at 02:12
so u mean size of the div will be determined by its content? — Bert, Feb 29 '12 at 02:15
try my example below but im not sure if thats what you want. — Bert, Feb 29 '12 at 02:22

Nathan Arthur · Answer 1 · 2012-02-29T02:07:45.043

3

The trick is to set #slides to a sufficiently great width that you will never have to worry about it, and then chop it to your desired width using your #viewport div, as demonstrated in this fiddle. By simply adjusting the left value of #slides, you can move your strip of divs left and right.

The 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.

edited Feb 29 '12 at 02:07

answered Feb 29 '12 at 02:02

Nathan Arthur

8,287
7
55
80

In this example, #slides is a known width. Are you able to modify to the CSS to not go on that assumption? – liamacheung Feb 29 '12 at 02:07
As long as you make the div sufficiently wide (thousands upon thousands of pixels, if you like) it shouldn't be a problem to define a width. – Nathan Arthur Feb 29 '12 at 02:10

Luke · Accepted Answer · 2012-02-29T02:51:14.677

2

I think that http://jsfiddle.net/5JHW5/2/ is what you're wanting. It uses jQuery to figure what the width of #slides is and sets its width appropriately. I also added in some controls for scrolling, just because I like doing stuff like that. If you need to see more in the example I gave let me know.

Cheers!

edited Feb 29 '12 at 02:51

answered Feb 29 '12 at 02:45

Luke

2,053
1
18
25

This assumes that each Content item is the same width. If they're not then you could still do it my way but would be slightly more complex. – Luke Feb 29 '12 at 02:48
I was hoping to avoid using JS to dynamically resize the width of slides if it possible, but this works. Thanks. – liamacheung Feb 29 '12 at 03:06
Sorry, just read that in your question. I'll look into doing it with just css. – Luke Feb 29 '12 at 03:14

score 0 · Answer 3 · answered Feb 29 '12 at 02:06

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

score 0 · Answer 4 · answered Feb 29 '12 at 04:37

If you set display: none on the slides that aren't supposed to be visible, they won't take up any space, and there's no need for a container div any larger than needed to hold your three visible slides. I've added a shown class to three slides to distinguish which ones are visible (you could toggle this in javascript). Setting float=left on div#slides causes it to take up just enough space to fit 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>

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

Prevent floating divs from dropping to next line

4 Answers4

Linked