How can I float a bunch of divs and still get overflow? [ANSWERED]

How can I float a bunch of divs and still get overflow?

Asked By: Daniel Kaplan
Originally Asked On: 2014-01-07 04:00:16
Asked Via: stackoverflow

Here is my jsfiddle showing my attempt:

HTML:

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

</div>

CSS:

#container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
}

.box {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

I expect/want this to create one long row with a horizontal scrollbar. Instead, the boxes are wrapping to a second row when the reach the end of the container. I want them to keep going. How can I accomplish that?

He received 2 answers
eventually accepting:

m59’s answer to

How can I float a bunch of divs and still get overflow?

You can use white-space: nowrap on the parent and display: inline-block on the children. Live demo (click).

#container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
    white-space: nowrap;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

The answer with the highest score with 1 points was:

Andrew Shepherd’s answer to

How can I float a bunch of divs and still get overflow?

I solved the problem by wrapping them in a frame using display:table-cell.

jsfiddle

The css:

   #container {
  width: 300px;
  max-width:300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
}



.box {
  display:table-cell;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  border: 1px solid black;
}

If the selected answer did not help you out, the other answers might!

All Answers For: How can I float a bunch of divs and still get overflow?

m59’s answer to

How can I float a bunch of divs and still get overflow?

You can use white-space: nowrap on the parent and display: inline-block on the children. Live demo (click).

#container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
    white-space: nowrap;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

Andrew Shepherd’s answer to

How can I float a bunch of divs and still get overflow?

I solved the problem by wrapping them in a frame using display:table-cell.

jsfiddle

The css:

   #container {
  width: 300px;
  max-width:300px;
  height: 300px;
  border: 1px solid black;
  overflow-x: auto;
}



.box {
  display:table-cell;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  border: 1px solid black;
}

Of course, you should really check out the original question.

The post How can I float a bunch of divs and still get overflow? [ANSWERED] appeared first on Tech ABC to XYZ.