How to get inner div to ignore the padding of outer div

[ptrcao]

Want inner div to ignore the padding of outer div, so it extends to the outer div's edges.

And no, removing the outer div's padding is not an option, it has an important function in my layout.

How, please?

[Rowsdower!]

Set the container to position:relative; then set the inner div to position:absolute;

Edit: I should also mention, you would need to set the inner div to have width:100%; and height:100%; to get full coverage of the container div.

[ptrcao]

Originally Posted by Rowsdower!

Set the container to position:relative; then set the inner div to position:absolute;

Thanks, unfortunately it had unexpected results. Did not achieve what I needed. Outer div's padding remains while text inside the outer div is now occupying the same space as the absolute inner div and getting obscured. More ideas?

Edit: I am trying your appended solution. Will report back asap.

Nope. Suggestion appreciated, alas it causes disarray.

[Excavator]

Hello ptrcao,
I think it's time you showed us what you are doing. Post some code.

[Rowsdower!]

Hmm, you hadn't mentioned other content being in the container div.

It might help if I could see your page. Do you have a link?

If this inner block is at the top or the bottom of the container then we still have options using this method.

If not, we will need to think of somthing else!

[ptrcao]

Originally Posted by Rowsdower!

Hmm, you hadn't mentioned other content being in the container div.

It might help if I could see your page. Do you have a link?

If this inner block is at the top or the bottom of the container then we still have options using this method.

If not, we will need to think of somthing else!

Indeed.

http://www.mathannotated.com/pages/p...ability-1.html

See that navy div.pathbar "HS Topics > Probability"

It is not sticking to the inner edges of the outer "div.content"

See also that the padding of div.content has an indispensible role in forming margins for text in the same div box so I don't want to do away with it, however I want my div.pathbar to stick to the edges of div.content

PS What do you call the "pathbar" - it's not the official term but that's what I called it for want of the proper term.

[Excavator]

I think the normal approach would be to have your .pathbar full widht of .content with a padded container for actual content below that. That would allow for multiple instances of .pathbar (which should really be a heading tag) and related contents.

This works in FF4 though -

/* Navigator bar */

div.pathbar{
margin: 0 -1em;
display: block;
background: #2E3192;
height: 1em;
color: white;
font-weight: bold;
text-decoration: none;
padding-top: 0.5em;
padding-left: 0.5em;
padding-bottom: 1em;
border-bottom: white solid 2px;
}

[Rowsdower!]

That is called a "breadcrumb."

The cleanest way is to create a second wrapper inside of #content that houses everything BUT your breadcrumb div, then apply your padding to that container rather than #content.

If not that, then you can give every ul, div, h1, h2, h3, h4, h5, and so on left and right padding of 1em, but that would be a bit round about for getting what you need.

You could also stick with the position:absolute approach and just add sufficient top padding to the #content div to allow for your breadcrumb to not overlap your content (you will also have to specify a set height for your breadcrumb rather than the 100% setting that I mentioned earlier). That's also not ideal if your layout changes or your breadcrumb wraps to a second line for any reason.

Bottom line: I'd add that second wrapper and put everything other than your breadcrumb into it and then apply padding there instead.

[ptrcao]

Practical and clean solutions. Both Excavator and Rowsdower have my thanks. Thank you; I will work along those lines to achieve the desired effect.