Avoiding parent div properties in child div

Question

I am using the following code to center align my webpage,

#parent{
      margin:0 auto;
      width: 960px;  
}
<div id="parent">
          <!--more code goes here-->
</div>

The properties have moved to all of the child div's causing them to be center aligned. I am not a CSS coder but I rememeber there is a trick to make the parent div elements to stick to the parent div only. Please help. Thanks

score 2 · Answer 1 · answered Sep 29 '12 at 23:07

2

#parent{
    margin: 0 auto;
    width: 960px;  
}

#parent * {
    margin: 0;
    width: auto;
}

answered Sep 29 '12 at 23:07

Zoltan Toth

46,981
12
120
134

score 1 · Answer 2 · answered Sep 29 '12 at 23:07

1

#parent{
      margin:0 auto;
      width: 960px;  
}
#child{
      margin:0;
      width: 960px;  
}
<div id="parent">
<div id="child">
          <!--more code goes here-->
</div>
</div>

would work, right?

answered Sep 29 '12 at 23:07

Sidharth Mudgal

4,234
19
25

score 0 · Answer 3 · answered Sep 29 '12 at 23:08

What I usually do to avoid having children inherit properties is have one parent with two children. I make identical divs for each of the children. Then, I give one of those divs the properties you DO NOT want the other children to have, like opacity or others. After that, I put the regular children layout divs and content into child number 2. That way, the undesirable properties become sibling properties, and not inherited.

score 0 · Answer 4 · answered Sep 30 '12 at 07:39

The margin and width properties are not inherited (except via the use of the inherit value). However, an inner element appears by default within the outer element visually, so it may look like it inherited those properties. In reality, e.g. margin-left is 0 (by default), but this means that the element starts at the same horizontal position as its parent. Similarly, width is auto for block elements that have no width set on them, and this means the available horizontal space.

The fix to your problem depends on what the problem is. There is no inheritance problem for these properties. But if you wish to make e.g. a child of a centered element start at the very left of the browser window, you need to e.g. set negative margin on it or to use absolute positioning.

For many other properties, such as color, an element inherits the property from its parent if the property is not set on the element itself. If inheritance is not desirable, set the property on the inner element. There is no trick; this is how CSS works.

Avoiding parent div properties in child div

4 Answers4