 <p>I would change <code>.some-block</code> from <code>float:left;</code> to <code>display:inline;</code>. That way, a standard div like <code>.regular-block</code> will automatically show underneath and you don't need a clear between them.</p> <p>Then you can put the <code>clear</code> div at the bottom to fix the block heights:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper{ border: 1px solid brown; } .left-block{ float:left; width:100px; padding:5px; border: 1px solid red; } .right-block{ margin-left: 112px; border: 1px solid green; padding:5px; padding-bottom:0; } .some-block{ display:inline; border: 1px solid yellow; } .regular-block{ margin-top:10px; border: 1px solid violet; } .clear{ clear:left; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt; &lt;div class="left-block"&gt; &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, lorem dapibus tristique rhoncus, justo erat volutpat erat, in malesuada enim libero quis metus. Nunc tristique maximus efficitur. Sed nec dolor ut quam consequat molestie id quis justo. &lt;/p&gt; &lt;/div&gt; &lt;div class="right-block"&gt; &lt;p&gt; Nunc a lectus enim. Quisque sit amet iaculis turpis, a auctor tortor. Mauris aliquet sapien non odio tempor, auctor gravida nunc commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum eu tellus vel volutpat. Cras sed neque egestas, ullamcorper purus id, viverra odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et malesuada est, et bibendum lectus. &lt;/p&gt; &lt;div class="some-block"&gt;654&lt;/div&gt; &lt;div class="some-block"&gt;132&lt;/div&gt; &lt;div class="some-block"&gt;987&lt;/div&gt; &lt;div class="regular-block"&gt;10002&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div</code></pre> </div> </div> </p>