Make A Full Width Div Inside A Div With Padding

[Planet13]

Hi all,

Is there a best (or at least "gooder") way to make a div full width if it is already inside a div that has padding in it?

For instance, if I have a content div with lots of text in it and that has a border, and I don't want the text and h1, h2, h3 tags to go all the way to the edges, but then I want to put a full-width image or call to action in that same div?

Right now, I am adding an end div tag, putting a new div in, and then starting with a new div tag, like this:

.content {
padding: 10px;
}

.call-to-action {
width: 100%;
margin: 0 auto;
background-color: blue;
}

<div class="content">
<h1>this is a headline that I want to be 10px away from the edges of the content div</h1>
<p>This is a paragraph that I also want to be 10px away from the edges of the content div</p>

</div> <!-- I am ending the content div here so I can put in a full width div -->

<div class="call-to-action">
Here is some text and stuff that I want the blue background color to start all the way to the edges of the content div</div>

<div class="content">
<p>Here is more text content that I want to be 10px away from the edge of the .content div</p>

Because this is going into wordpress, the easier it would be for a user / content creator to do, the better.

~~~~~

Would it be better to remove the padding from the .content style and instead add MARGINS to the elements that are children / descendants of the content div?

.content {
padding: 0;
}

.content h1, .content h2, .content p {
margin: 0 10px;
}

Thanks in advance.

[lucy24]

Start by looking at what you want to do. Then and only then you can work out the code for it.

if I have a content div with lots of text in it and that has a border, and I don't want the text and h1, h2, h3 tags to go all the way to the edges, but then I want to put a full-width image or call to action in that same div?

If it were me, I'd take a different approach. For example

.container h1, .container h2, .container h3, .container p {margin-left: 2em; margin-right: 2em;}
.container p.call-to-action {margin-left: 0; margin-right: 0}

Would it be better to remove the padding from the .content style and instead add MARGINS to the elements that are children / descendants of the content div?

This :)

9 times out of 10, there's no visible difference between side margin and side padding as long as you're in ordinary block display. (Top and bottom, yes, because margins overlap while padding is separate.) Technically, padding is within the element while margins are outside. The difference becomes visible when there are backgrounds and/or borders involved.

[Fotiman]

Another option would be to apply negative left and right margins to your call-to-action. For example:

<div class="content"> 
  <h1>
    this is a headline that I want to be 10px away
    from the edges of the content div
  </h1> 
  <p>
    This is a paragraph that I also want to be 10px away
    from the edges of the content div
  </p> 
  <div class="call-to-action"> 
    Here is some text and stuff that I want the blue background
    color to start all the way to the edges of the content div
  </div>
</div>

.content {
  padding: 10px; 
} 

.call-to-action { 
  margin: 0 -10px; 
  background-color: blue; 
}

Note, don't specify width: 100% on the call-to-action, else it will be the width before the margins are adjusted (meaning 20px smaller than the content block). Omit the width and let it be auto to fill the available space. In my opinion, this is much less code to achieve the desired result, and you don't need to worry about what happens when you add a new element type as a child of content.

[Planet13]

Thank you both, Lucy and fotiman.

i will try both, although I am guessing that the negative margins are going to work the best.

anyone know how compatible negative margins are with older browsers? (too lazy to look it up on a Friday night... I need to get a couple of shots of cheap Tequila in me before starting to work on my taxes...)

[Fotiman]

Support for negative margins is pretty good. Even works in IE6. :)

[lucy24]

negative margins

They're pretty universal. You can't have negative padding, though.