Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The negative margin is the only way to go in this case really (and is one of the few cases where I'd consider it acceptable use).</p> <p>There are other solutions you could explore (e.g. have the red bg set as a centrally aligned bg image, then have <code>div</code>'s with padding for content outside the <code>h1</code>) but there's really no bonus to doing this over using a negative margin, in fact long term it's less maintainable.</p> <p>As has already been suggested, you could also use positioning to resolve this (see example below).</p> <p>HTML:</p> <pre><code>&lt;div class="container"&gt; &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt; &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt; &lt;h1&gt;testing, testing, 1 2 3&lt;/h1&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.container { background: #f00; margin: 0 0 0 20px; padding: 100px 0; position: relative; width: 400px; } h1 { background: #00f; color: #fff; left: -20px; padding: 0 20px; position: absolute; width: 100%; } </code></pre> <p><a href="http://jsfiddle.net/d7KJ9/4/" rel="nofollow">http://jsfiddle.net/d7KJ9/4/</a></p> <p>Unfortunately though adding content after the <code>h1</code> seems to break this method:</p> <p><a href="http://jsfiddle.net/d7KJ9/2/" rel="nofollow">http://jsfiddle.net/d7KJ9/2/</a></p> <p>Furthermore, if the above method did work, it wouldn't necessarily be any better than using a negative margin (it actually involves more CSS).</p> <p>In conclusion, just go the negative margin solution, negative margins aren't necessarily a bad thing when used appropriately, just reason with yourself before using them (is there a better way to accomplish what you want?)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload