How to get Floating DIVs inside fixed-width DIV to continue horizontally?

Question

I have a container DIV with a fixed height and width (275x1000px). In this DIV I want to put multiple floating DIVs each with a width of 300px, and have a horizontal (x-axis) scrollbar appear to allow the user to scroll left and right to view everything.

This is my CSS so far:

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

The problem is that the floating DIVs will not continue past the width of the container. After putting three of the floating DIV's they will continue on beneath. If I change overflow-y to auto, then the vertical scrollbar appears and I can scroll down.

How can I change this to make the floating DIVs continue on without going beneath each other?

score 43 · Accepted Answer · answered Jun 19 '09 at 00:23

43

div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.

answered Jun 19 '09 at 00:23

pd.

1,225
10
9

2

Inline-block is not supported by all browsers so it should never be used. – Matthew James Taylor Jun 19 '09 at 00:42
19

It's quite well supported, actually, as long as you're aware of the one issue with IE 6/7. It won't work in IE 5.5 or FF 2, but neither of those represent anything close to a significant share of users these days. – pd. Jun 19 '09 at 02:20
i had a similar problem where i wanted to do float:left on elements inside a div. when i do that the div's vertical space seems to shrink. using just 'overflow: auto;' on the outer div seems to fix my problem. – Vicer Dec 12 '11 at 02:47
I've been avoiding inline-block because I also heard it didn't work in IE7. Good to know it works with a span, that's easy enough to do. So far working great. – eselk Nov 29 '12 at 20:24

score 8 · Answer 2 · answered Jan 16 '15 at 10:40

#row {
    white-space: nowrap; /* important */
    overflow: auto;
}

.items {
    display: inline-block;
}

<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 3" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 4" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 5" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 6" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 7" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 8" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 9" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 10" />
    </div>
</div>

The trick here is the "white-space: nowrap" property of the parent which simply tells all it's child elements to continue horizontally and the "display: inline-block" property of it's children. You don't need to add any other property to make this work.

JS Fiddle: http://jsfiddle.net/2c4jfetf/

score 7 · Answer 3 · edited May 02 '16 at 06:59

7

You need an extra div with a large width to contain the blocks, then they will extend wider than the container div and not drop down to a new line.

The HTML:

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

The CSS:

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

edited May 02 '16 at 06:59

Rajaprabhu Aravindasamy

66,513
17
101
130

answered Jun 19 '09 at 00:41

Matthew James Taylor

4,806
5
29
33

1

Hey it's Matthew James Taylor! I find your site a very useful resource. And good answer +1 – alex Jun 19 '09 at 00:43
1

Down voted because the SPAN solution works better and for an unlimited number of inner blocks - don't need to know an estimated width. – Ron Savage Jun 19 '09 at 01:08
@Ron you may be right, a span version could be best except it may not be valid HTML to put block-level elements inside inline elements. See this question: http://stackoverflow.com/questions/746531/is-it-wrong-to-change-a-block-element-to-inline-with-css-if-it-contains-another-b – Matthew James Taylor Jun 23 '09 at 12:25
@Alex it's good to see a fellow Aussie on here! Thanks for the upvote ;) – Matthew James Taylor Jun 23 '09 at 12:48
@Matthew James Taylor No one is recommending a solution that uses a block element inside an inline element. – pd. Jun 24 '09 at 23:29

score 1 · Answer 4 · answered Jun 19 '09 at 00:39

Wrap your floated divs in another div with the wider width.

<div style="width:230px;overflow-x:auto;background-color:#ccc;">
    <div style="width:400px">
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
    </div>
</div>

score 0 · Answer 5 · edited Nov 18 '09 at 09:25

0

Use:

    div#container {
        overflow: auto;
    }

Or add a clearing div below the three divs with the style:

    {
        clear: both
    }

edited Nov 18 '09 at 09:25

Peter Mortensen

30,738
21
105
131

answered Jun 19 '09 at 00:03

Rony

9,331
2
22
22

score 0 · Answer 6 · edited Sep 27 '11 at 16:17

Put the divs you want to scroll in a table like so:

<div style='width:1000;border:2 solid red;overflow-x:auto'>
   <table><tr>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>

Edit: I tried 3 of these suggested solutions - they all work fine in Google Chrome - but the first one (container1) doesn't work in IE (go figure) - so the SPAN solution gets my vote :-) :

<html>
<body>
<style>
div#container1 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container1 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container2 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container2 span.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container3 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container3 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

</style>
<p>
<div id='container1'>
      <div class='block'>Cell 1&nbsp;</div>
      <div class='block'>Cell 2&nbsp;</div>
      <div class='block'>Cell 3&nbsp;</div>
      <div class='block'>Cell 4&nbsp;</div>
      <div class='block'>Cell 5&nbsp;</div>
</div>
<p>
<div id='container2'>
      <span class='block'>Cell 1&nbsp;</span>
      <span class='block'>Cell 2&nbsp;</span>
      <span class='block'>Cell 3&nbsp;</span>
      <span class='block'>Cell 4&nbsp;</span>
      <span class='block'>Cell 5&nbsp;</span>
</div>
<p>
<div id='container3'>
   <table><tr>
      <td><div class='block'>Cell 1&nbsp;</div></td>
      <td><div class='block'>Cell 2&nbsp;</div></td>
      <td><div class='block'>Cell 3&nbsp;</div></td>
      <td><div class='block'>Cell 4&nbsp;</div></td>
      <td><div class='block'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>
</body>
</html>

Edit 2:

I ran this test page through browsershots.org, to see how different browsers handle it. Conclusion: Browser compatibility sucks. :-)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

The table solution worked more often - but the span option (which is cleaner) only broke on browsers I've never heard of. :-)

@Matthew James Taylor: That's just stupid, you don't know if a table solution is or isn't appropriate because the contents of the divs / cells are not known to us. — jeroen, Jun 19 '09 at 14:46

score 0 · Answer 7 · answered Jun 19 '09 at 00:18

0

The table solution should work very well.

If you don't want to use tables, you can also put all .block divs in another div inside the #container and give that "in-between-div" a fixed - calculated - width using javascript after loading the page.

Of course if you already know how many .blocks you have / if the number is fixed, you can give the "in-between-div" a fixed width using css.

answered Jun 19 '09 at 00:18

jeroen

91,079
21
114
132

2

That's just stupid, you don't know if a table solution is or isn't appropriate because the contents of the divs / cells are not known to us. – jeroen Jun 19 '09 at 14:45
Matt's original question stated that he wanted 'multiple floated divs' so a table solution is most probably not suitable. – Matthew James Taylor Jun 23 '09 at 11:54
True, which is why I suggested a css / javascript solution. My comment about tables merely refered to Ron Savage's solution which will work always but uses tables. – jeroen Jun 23 '09 at 15:33

score 0 · Answer 8 · edited Nov 18 '09 at 09:11

0

It sounds like you are doing gallery with div's?

What exactly are you using the divs for?

It may be easier to use a ul/li with spans inside of the li to get the same effect without all the headaches of floating divs.

edited Nov 18 '09 at 09:11

Peter Mortensen

30,738
21
105
131

answered Jun 19 '09 at 03:00

SkyLar

93
2
8

score 0 · Answer 9 · answered Jul 31 '13 at 21:24

My Ex:

div width: 850px gridview templatedcolumn ItemTemplate

<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>

end ItemTemplate end templatedcolumn end gridview end div

the button has left middle(actual button) right spans which where not floating as there was outer div with fixed width.

I had to use additional div with width 140px outside the button , inside the itemtemplate then it worked.

Hope this helps!!!

Thank You Harish

How to get Floating DIVs inside fixed-width DIV to continue horizontally?

9 Answers9

Linked

Related