Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

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

    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?

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    Last edited by Rowsdower!; 12-17-2010 at 09:12 PM. Reason: Forgot to mention height/width...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    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.
    Last edited by ptrcao; 12-17-2010 at 09:16 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello ptrcao,
    I think it's time you showed us what you are doing. Post some code.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    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.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    /* 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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ptrcao (12-17-2010)

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    ptrcao (12-17-2010)

  • #9
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Practical and clean solutions. Both Excavator and Rowsdower have my thanks. Thank you; I will work along those lines to achieve the desired effect.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •