 <p>Using one floated span with a border:</p> <pre><code>&lt;div class="heading"&gt; &lt;span&gt;&lt;/span&gt; &lt;h3&gt;Heading&lt;h3&gt; &lt;/div&gt; .heading { width: 100%; text-align: center; line-height: 100%; } .heading span { float: left; margin: 20px 0 -8px; border: 1px solid; width: 100%; } .heading h3 { display: inline; padding: 0px 0px 0 20px; width: auto; margin: auto; } </code></pre> <p>The negative base margin on the span may need to be adjusted for different heading sizes. , The background colour of the heading should match the background of the overall container.</p> <p><a href="http://jsfiddle.net/QVUKJ/" rel="nofollow">JS Fiddle demo</a></p>