How To Take An Element Over To Given Padding With Css

In the below image. I've given 10px padding to container because most of the time I need that padding. only the headings (blue) I don't need padding. How to extend heading over pad

Solution 1:

Negative margin on the headings.

See on jsFiddle: http://jsfiddle.net/f2cdJ/

CSS

div {
  background: red;  
  padding:10px;
  width:200px; 
}
p {
  background: green;   
}
h2 {
  margin: 0 -10px;   
  background: blue;
}

HTML

<div>
    <p>This is the paragraph. This is the paragraph.</p>
    <h2>This is a heading</h2>    
    <p>This is the paragraph. This is the paragraph.</p>
    <h2>This is a heading</h2>
    <p>This is the paragraph. This is the paragraph.</p>
</div>

Solution 2:

Using the same code as jessegavin did . I used relative and absolute positioning

see it on jsFiddle here

CSS

div {
 background: red;  
 padding:10px;
 width:200px;
 position:relative;
}
p {
 background: green;   
}
h2 {
 background: blue;
 position:absolute;
 left:0;
 width:100%;
}

HTML

<div>
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p>
    <h2>This is a heading</h2>    
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p>
    <h2>This is a heading</h2>
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p>
</div>

Solution 3:

As jessegavin said, use negative margins.

Negative margins are funky, but they work properly. You'd have to include the 10px padding twice (once for the left, another time for the right padding) into the width of the heading, and then do a negative margin-left:

margin-left: -10px;