 <p>Use <code>display: inline-block</code> and <code>text-align: center</code> instead.</p> <pre><code>div.floatingPic { display: inline-block; padding: 12px; } div.containerVid { border: 2px solid #99cc99; background-color: #000000; padding: 45px; height: 890px; border-radius: 10px; margin-bottom: 25px; text-align: center; } </code></pre> <p>As long as <code>.containerVid</code> is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <code>&lt;br /&gt;</code> (as you've been doing).</p> <p>fiddle: <a href="http://jsfiddle.net/T2qHR/20/" rel="nofollow">http://jsfiddle.net/T2qHR/20/</a></p>