How do I get divs to spread out horizontally without wrapping?

Question

I have the following code being generated:

<html>
<head>
<style>
    div.week {
        overflow-x: scroll;
        height: 70%;
    }

    div.day{
        float: left;
        width: 300px;
        border: thin black solid; 
        background-color: cyan;
        margin-right: 2em;
        vertical-align: top;
    }
</style>
</head>
<body>


<div class="week">

    <div class="day">
     2015-06-28         
    </div>

    <div class="day">
     2015-06-29         
    </div>

    <div class="day">
     2015-06-30         
    </div>

    <div class="day">
     2015-07-01         
    </div>

    <div class="day">
     2015-07-02         
    </div>

    <div class="day">
     2015-07-03         
    </div>

    <div class="day">
     2015-07-04         
    </div>

</div>


</body>
</html>

The problem is that it wraps the day divs, so at my current resolution I have a row of 4 and a row of 3 divs:

+=====================================+
|                                     |
|  +----+   +----+   +----+   +----+  |
|  |    |   |    |   |    |   |    |  |
|  |    |   |    |   |    |   |    |  |
|  +----+   +----+   +----+   +----+  |
|                                     |
|  +----+   +----+   +----+           |
|  |    |   |    |   |    |           |
|  |    |   |    |   |    |           |
|  +----+   +----+   +----+           |
|                                     |
+=====================================+

However, what I want is for all of my day divs to be on one line, regardless of the size of my browser with a scrollbar appearing beneath:

+=====================================+
|                                     |
|  +----+   +----+   +----+   +----+  |
|  |    |   |    |   |    |   |    |  |
|  |    |   |    |   |    |   |    |  |
|  +----+   +----+   +----+   +----+  |
|<[  ]:::::::::::::::::::::::::::::::>|
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
+=====================================+

How can I make this work?

Use display:inline-block instead of float http://jsfiddle.net/pkdu0g1c/ — akash, Jun 30 '15 at 12:20

Tomek Sułkowski · Accepted Answer · 2015-06-30T12:24:00.027

Set overflow: auto (so the scrollbar appears if needed) on your wrapping element and white-space: nowrap (so the child elements dont go to the next line).

section {
  width: 300px;
  height: 100px;
  background: red;
  overflow-x: auto;
  white-space: nowrap;
}
div {
  width: 75px;
  height: 100px;
  background: blue;
  display: inline-block;
}

<section>
  <div>1.</div>
  <div>2.</div>
  <div>3.</div>
  <div>4.</div>
  <div>5.</div>
  <div>6.</div>
  <div>7.</div>
</section>

score 0 · Answer 2 · answered Jun 30 '15 at 12:40

Do this, add a wrapper around your day elements, give it a width of 100% and white-space: nowrap. Then give your day elements a display: inline-block.

div.week {
     overflow-x: scroll;
     height: 70%;
   }
   .wrapper {
     width: 100%;
     white-space: nowrap;
   }
   div.day {
     display: inline-block;
     width: 300px;;
     border: thin black solid;
     background-color: cyan;
     margin-right: 2em;
     vertical-align: top;
   }

<div class="week">
  <div class="wrapper">
    <div class="day">
      2015-06-28
    </div>

    <div class="day">
      2015-06-29
    </div>

    <div class="day">
      2015-06-30
    </div>

    <div class="day">
      2015-07-01
    </div>

    <div class="day">
      2015-07-02
    </div>

    <div class="day">
      2015-07-03
    </div>

    <div class="day">
      2015-07-04
    </div>
  </div>

</div>

How do I get divs to spread out horizontally without wrapping?

2 Answers2