 <h2>Methods</h2> <p>You could use one of the following methods:</p> <ul> <li><code>float:left;</code> on <code>.menu</code></li> <li><code>display:inline-block;</code> + <code>vertical-align:top;</code> on <code>.menu</code></li> <li><code>position:absolute;</code> on <code>#changetitle</code></li> </ul> <p>With the <code>float</code> and <code>vertical-align</code> methods, you'll need to remove the <code>margin-right</code> on <code>.menu ul</code> (<code>float</code> will also work if you give the menu a width). With <code>position:absolute</code> you're goning to spend a whole lot of time getting the <code>left</code> and <code>top</code> values right :P</p> <h2>Which is best?</h2> <p>Probably <code>inline-block</code>. It's the easiest to set up, and just works. Best of all, it's <em>dynamic</em>. If you want to add another menu item at a later date and have to make the <code>.menu</code> div bigger, you don't have to change the CSS, whereas <code>float</code> usually would require you to set a width on <code>.menu</code> and <code>position:absolute</code> <em>definitely</em> requires that (as it is telling the browser exactly at what pixel to put <code>#changetitle</code>. If you're going to have more columns continue this design throughout the rest of the page, you <em>may</em> want to consider using <code>column</code> or <code>display:table</code> (<strong>never</strong> an actual <code>&lt;table&gt;</code> :P)</p> <p>Long story short, use <code>inline-block</code>.</p> <p>Here's a working demo: <a href="https://jsfiddle.net/mnfgo32g/12/" rel="nofollow">https://jsfiddle.net/mnfgo32g/12/</a></p>