Question

So I am having this strange issue where i have an element in a container and it is inheriting the width from the conatiner.

to try and fix this i just set the css width property to whatever i want. when i go to preview in the browser it has adjusted the width properly, but it has now extended out the right margin to fill in the container.

I tried to offset this by doing things like margin-right: 0; or using negative values, but nothing is working

Answer 1

The width of the child is never inherited from the parent(the exact value specified on the parent)! However, it is dependent on the parent’s width. If you specify a width on the parent and have a block-level child, it will always expand to 100% of the parents width. That is completely normal behavior.

If you set an explicit width on a child-element, you have to be aware, that it’s padding and border are not accounted into the total width (using standard box modell). You have two options:

• account the padding
• alter the box-modell

the css:

#parent{
   width:100px;
}
#child{
   padding:10px;
   width:100px;   /* child will be 20px too wide */
}
/*method 1*/
#child{
   padding:10px;
   width:80px;   /* child will fit perfectly: 80px +10px + 10px */
}
/* method 2*/
#child{
   padding:10px;
   width:100px;
   box-sizing:border-box;      /* child will fit perfectly
                               width now includes content and padding */
   -moz-box-sizing:border-box; /* for compatibility*/
   -webkit-box-sizing:border-box;
}

note however, that box-sizing is a newer css-property and not every browser can handle it.