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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to exempt from inheritance

    Not sure I have titled this correctly, but I have a container div and many divs nested within it. The contain div has padding:10px; and so all the nested divs inherit this. However, I have one of the nested divs that is a widget and it displays poorly (much of it disappears) because of the padding:10px; of the container div.

    I don't want to move the padding statement out of the container div styling and into all of the the nested divs because there are many of them and it will be messy to maintain that way. Is there some css styling I can use to exempt the widget div from the padding:10px? I tried adding padding:-10px; to the widget div styling, but this did not undo the padding that came from the container div.

    G

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Try making the container div 20px slimmer and add a margin of 10px. Then the padding will not exist but you will have the space of the margin. You would have to make it so that the rest of the nested divs have some padding but not the widget.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Quartzy. Actually, the containing div is like so:

    #container div {
    margin: 0px 10px 0px 10px;
    padding: 10px;
    }

    There are many of the divs inside the container and I am trying to avoid coding padding for each of them -- that, of course is the surefire way to fix the problem. I am asking if there is any other way.

    G

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    There is no inheritance going on at all. With #container div you are explicitly targeting all the divs inside #container, no matter how far they are nested inside. If you really want the div with the id "container" to have a padding, the right selector would be #container. If you want all the immediate child divs of #container to have padding (but not any divs that might be nested inside the widget), the right selector would be #container>div.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, venegal.

    Sounds promising, but I am not sure what you are suggesting.

    If I code
    #container>div {
    margin: 0px 10px 0px 10px;
    padding: 10px;
    }
    Then the widget is fine, but nothing has padding (which is why the widget div is fine). I have never seen #container>div and don't find anything if I search for it. How is this used?

    G

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Quote Originally Posted by gorilla1 View Post
    Thanks, Quartzy. Actually, the containing div is like so:

    #container div {
    margin: 0px 10px 0px 10px;
    padding: 10px;
    }

    There are many of the divs inside the container and I am trying to avoid coding padding for each of them -- that, of course is the surefire way to fix the problem. I am asking if there is any other way.

    G
    There is no other way that I know of.

  • #7
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    There's no way to know what would actually work without seeing your site.

    Here's some info about child selectors: http://www.w3.org/TR/CSS2/selector.html#child-selectors

    The thing is, let's say your markup looks like that:
    Code:
    <div id="container">
    	<div>just a div</div>
    	<div id="widget">
    		<div>a nested div inside the widget</div>
    	</div>
    </div>
    then #container div will select all the divs:
    Code:
    <div id="container">
    	<div>just a div</div>
    	<div id="widget">
    		<div>a nested div inside the widget</div>
    	</div>
    </div>
    while #container>div will only select child divs:
    Code:
    <div id="container">
    	<div>just a div</div>
    	<div id="widget">
    		<div>a nested div inside the widget</div>
    	</div>
    </div>

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts
    quartzy - thanks again for your thoughts

    venegal - thanks for that - i did not really understand it. i need to monkey with it some more.

    g


  •  

    Posting Permissions

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