CSS Width auto and float left - Allow to overflow

Question

I've got a container div which has property width: auto;. This container has children elements which have property float: left;. The normal behaviour is to align all the elements continously until one element overflows the container div. In that case, that child element will be placed under the other children elements. I'm trying to force children elements to expand container div even if it overflows. I want all the children elements to be aligned.

How could I achieve this?

Can you add an example of the HTML markup (preferably using the snippet tool in the editor's menu bar... ctrl-M) — D.B., Feb 28 '18 at 23:29

score 5 · Accepted Answer · answered Feb 28 '18 at 23:48

Since float elements do not increase parent's width you probably need to make them display: inline-block then you can add white-space: nowrap to the parent. display: inline-block is also useful if you need to use non-transparent background for the parent.

.container {
  background-color: yellow;
  white-space: nowrap;
  font-size: 0;
  margin: 5px 0;
}
.second.container {
  display: inline-block;
}
.container > div {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: firebrick;
  margin: 10px;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="second container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS Width auto and float left - Allow to overflow

1 Answers1