<p>I have a container div with a fixed <code>width</code> and <code>height</code>, with <code>overflow: hidden</code>.</p>
<p>I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of their parent. This will happen even if the <code>height</code> of the parent should not allow this. This is how this looks:</p>
<p><img src="https://i.stack.imgur.com/v2x7d.png" alt="Wrong" /></p>
<p>How I would like it to look:</p>
<p>![Right][2] - <em>removed image shack image that had been replaced by an advert</em></p>
<p>Note: the effect I want can be achieved by using inline elements &amp; <code>white-space: no-wrap</code> (that is how I did it in the image shown). This, however, is no good to me (for reasons too lengthy to explain here), as the child divs need to be floated block level elements.</p>

[{'answer_id': 37125, 'author': 'Sören Kuklau', 'author_id': 1600, 'author_profile': 'https://Stackoverflow.com/users/1600', 'pm_score': 3, 'selected': False, 'text': '<p>This seems close to what you want:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#foo {\r\n  background: red;\r\n  max-height: 100px;\r\n  overflow-y: hidden;\r\n}\r\n\r\n.bar {\r\n  background: blue;\r\n  width: 100px;\r\n  height: 100px;\r\n  float: left;\r\n  margin: 1em;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="foo"&gt;\r\n  &lt;div class="bar"&gt;&lt;/div&gt;\r\n  &lt;div class="bar"&gt;&lt;/div&gt;\r\n  &lt;div class="bar"&gt;&lt;/div&gt;\r\n  &lt;div class="bar"&gt;&lt;/div&gt;\r\n  &lt;div class="bar"&gt;&lt;/div&gt;\r\n  &lt;div class="bar"&gt;&lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 37129, 'author': 'fcurella', 'author_id': 3914, 'author_profile': 'https://Stackoverflow.com/users/3914', 'pm_score': 2, 'selected': False, 'text': '<p>you can use the <code>clip</code> property:</p>\n\n<pre class="lang-css prettyprint-override"><code>#container {\n  position: absolute;\n  clip: rect(0px,200px,100px,0px);\n  overflow: hidden;\n  background: red;\n}\n</code></pre>\n\n<p>note the <code>position: absolute</code> and <code>overflow: hidden</code> needed in order to get <code>clip</code> to work.</p>\n'}, {'answer_id': 37131, 'author': 'LucaM', 'author_id': 3511, 'author_profile': 'https://Stackoverflow.com/users/3511', 'pm_score': 8, 'selected': True, 'text': '<p>You may put an inner div in the container that is enough wide to hold all the floated divs.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {\r\n  background-color: red;\r\n  overflow: hidden;\r\n  width: 200px;\r\n}\r\n\r\n#inner {\r\n  overflow: hidden;\r\n  width: 2000px;\r\n}\r\n\r\n.child {\r\n  float: left;\r\n  background-color: blue;\r\n  width: 50px;\r\n  height: 50px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;\r\n  &lt;div id="inner"&gt;\r\n    &lt;div class="child"&gt;&lt;/div&gt;\r\n    &lt;div class="child"&gt;&lt;/div&gt;\r\n    &lt;div class="child"&gt;&lt;/div&gt;\r\n  &lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 5648296, 'author': 'Kwex', 'author_id': 705902, 'author_profile': 'https://Stackoverflow.com/users/705902', 'pm_score': 5, 'selected': False, 'text': '<p><code>style="overflow:hidden"</code> for parent <code>div</code> and <code>style="float: left"</code> for all the child <code>divs</code> are important to make the <code>divs</code> align horizontally for old browsers like IE7 and below.</p>\n\n<p>For modern browsers, you can use <code>style="display: table-cell"</code> for all the child <code>divs</code> and it would render horizontally properly.</p>\n'}, {'answer_id': 11717454, 'author': "Wolfpack'08", 'author_id': 445651, 'author_profile': 'https://Stackoverflow.com/users/445651', 'pm_score': 0, 'selected': False, 'text': '<p>Float them left.  In Chrome, at least, you don\'t need to have a wrapper, <code>id="container"</code>, in LucaM\'s example.</p>\n'}, {'answer_id': 32277117, 'author': 'William B', 'author_id': 5046541, 'author_profile': 'https://Stackoverflow.com/users/5046541', 'pm_score': 2, 'selected': False, 'text': "<p>Float: left, display: inline-block will both fail to align the elements horizontally if they exceed the width of the container.</p>\n\n<p>It's important to note that the container should not wrap if the elements MUST display horizontally:\n    <code>white-space: nowrap</code></p>\n"}, {'answer_id': 38420482, 'author': 'sriram hegde', 'author_id': 5065439, 'author_profile': 'https://Stackoverflow.com/users/5065439', 'pm_score': 3, 'selected': False, 'text': '<p>You can now use css flexbox to  align divs horizontally and vertically if you need to. general formula goes like this</p>\n<pre class="lang-css prettyprint-override"><code>parent-div {\n  display: flex;\n  flex-wrap: wrap;\n  /* for horizontal aligning of child divs */\n  justify-content: center;\n  /* for vertical aligning */\n  align-items: center;\n}\n\nchild-div {\n  width: /* yoursize for each div */\n  ;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/37103', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1349865/']