...

View Full Version : how to exempt from inheritance



gorilla1
02-13-2011, 02:39 AM
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

quartzy
02-13-2011, 03:16 AM
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.

gorilla1
02-13-2011, 05:35 AM
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

venegal
02-13-2011, 06:24 AM
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.

gorilla1
02-13-2011, 06:55 AM
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

quartzy
02-13-2011, 03:27 PM
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.

venegal
02-13-2011, 05:40 PM
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:

<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:

<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:

<div id="container">
<div>just a div</div>
<div id="widget">
<div>a nested div inside the widget</div>
</div>
</div>

gorilla1
02-13-2011, 10:01 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum