 <p>I just realized that, you are not floating the other element, this is causing it to shift down, you should use <code>float: left;</code> or <code>right</code> as it's a <code>div</code> so it will take up entire horizontal space, and hence it is pushed down.</p> <p><a href="http://jsfiddle.net/tykNw/" rel="nofollow"><strong>Demo</strong></a></p> <pre><code>.one, .two{ width: 300px; height: 450px; float:left; /* Float both elements */ background: #f00; } </code></pre> <hr> <p><strong>Alternative</strong></p> <p>You should use <code>display: inline-block;</code> and <code>white-space: nowrap;</code> to prevent the wrapping of the elements</p> <p><a href="http://jsfiddle.net/xCeSg/" rel="nofollow"><strong>Demo</strong></a></p> <p>This will gave you the same effect, the only thing is <code>4px</code> white space, you can simply use</p> <pre><code>.two { margin-left: -4px; } </code></pre> <p>the above will fix the white space issue for you</p> <p><a href="http://jsfiddle.net/xCeSg/1/" rel="nofollow"><strong>Demo 2</strong></a></p>