Prevent Divs from starting a new line with percentage width

Question

I have several divs inside another div and I want the user to be able to resize those divs but they should stay in percentage width. This example shows 6 divs with 18% width which is more than 100% together and the 6th div starts a new line:

http://jsfiddle.net/v3o3vqqo/

div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

.container { 
  width: 100%;
}

.inner { 
  width: 18%;  
  float: left;
  margin: 1px;
}

.red { 
  background-color: red;        
}

.orange { 
  background-color: orange;        
}

.yellow { 
  background-color: yellow;        
}

.green { 
  background-color: green;        
}

.blue { 
  background-color: blue;        
}

.purple { 
  background-color: purple;        
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>

<div class="container"><div class="inner red">&nbsp;</div><div class="inner orange">&nbsp;</div><div class="inner yellow">&nbsp;</div><div class="inner green">&nbsp;</div><div class="inner blue">&nbsp;</div><div class="inner purple">&nbsp;</div>
    <!-- Plus arbitrarily many more boxes... -->
</div>

I want it to show 2 children since their width is 100% togheter and 2 children in overflow (which means I need to scroll to see the other.

The problem is, if the parent's width is 100% and the sum of the children is more than 100%, they start a new line rather then cause a horizontal scroll.

So my question is how do I cause a horizontal scroll?

Please do not put stuff that is not code inside code blocks. (Especially, I don't understand why people often put the fiddle links in code blocks. It's a link, not code, seriously.) — Roope, Nov 14 '15 at 19:20
@Roope Lots of people put links to jsfiddle in code blocks because they see "*Links to jsfiddle.net must be accompanied by code. Please indent all code by 4 spaces*" doesn't allow them to post the question. They just indent the link instead of including the code. — Oriol, Nov 14 '15 at 19:46
@Oriol right, of course, I now remember figuring that out at some point before. Maybe there should be a jsfiddle recognition mechanism in the code blocks. — Roope, Nov 14 '15 at 22:29

score 1 · Answer 1 · edited May 23 '17 at 12:15

You can't achieve this with floats. You will have to use different layouts.

You can use flexbox. By default it has flex-wrap: nowrap, so there is no line wrap.

You will need to use flex-shrink: 0 to prevent shrinking when the flex items occupy more space than the available one.

.container {
  display: flex;
  overflow: auto;
}
.inner {
  width: 18%;
  height: 2em;
  flex-shrink: 0;
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
  <div class="inner" style="background: red"></div>
  <div class="inner" style="background: orange"></div>
  <div class="inner" style="background: yellow"></div>
  <div class="inner" style="background: green"></div>
  <div class="inner" style="background: blue"></div>
  <div class="inner" style="background: purple"></div>
</div>

Alternatively, you can use inline-block, and prevent line wrapping with white-space: nowrap. However, be aware of How to remove the space between inline-block elements?

.container {
  overflow: auto;
  white-space: nowrap;
}
.inner {
  display: inline-block;
  width: 18%;
  height: 2em;
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
  <div class="inner" style="background: red"></div
  ><div class="inner" style="background: orange"></div
  ><div class="inner" style="background: yellow"></div
  ><div class="inner" style="background: green"></div
  ><div class="inner" style="background: blue"></div
  ><div class="inner" style="background: purple"></div>
</div>

score 0 · Answer 2 · answered Nov 14 '15 at 19:29

One possible solution to what I understand your problem to be is the following.

Basic idea: use display: inline-block, and prevent white space issues by putting the closing > on the next line.

div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
.container { 
  width: 100%;
}
.inner {
  display: inline-block;
  width: 20%;
} 
.red { 
  background-color: red;        
}    
.orange { 
  background-color: orange;        
}
.yellow { 
  background-color: yellow;        
}
.green { 
  background-color: green;        
}
.blue { 
  background-color: blue;        
}
.purple { 
  background-color: purple;        
}

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>

<div class="container">
    <div class="inner red">&nbsp;</div
    ><div class="inner orange">&nbsp;</div
    ><div class="inner yellow">&nbsp;</div
    ><div class="inner green">&nbsp;</div
    ><div class="inner blue">&nbsp;</div>
    <!-- Plus arbitrarily many more boxes... -->
</div>

Prevent Divs from starting a new line with percentage width

2 Answers2