CODEWITHSUNDEEP
htmlcsscss-float
liamacheung
liamacheung

Reputation: 179

Prevent floating divs from dropping to next line

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?

Upvotes: 4

Views: 8369

Answers (4)

gcbenison
gcbenison

Reputation: 11963

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

Upvotes: 0

Luke
Luke

Reputation: 2063

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!

Upvotes: 2

Nathan Arthur
Nathan Arthur

Reputation: 9096

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.

Upvotes: 3

Bert
Bert

Reputation: 1029

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

Upvotes: 0

Related Questions