Is there a way to shrink a div overriding all the widths, margins, and paddings inside it? css

I have columns on both sides of my site with elements inside them with different widths, margins,and paddings. Is there a way to override all the in开发者_如何学Goner stuff and set a width for the whole column?

overflow:hidden; and !important tags on the widths of the columns don't set it.

---

If your widths are relative then "sort of". Absolute widths can't be set by outside elements.

For example, consider this markup:

<div id="outer">
    <div id="inner_1"></div>
    <div id="inner_2"></div>
</div>

If you have the inner divs set to percentage widths:

#inner_1 { width: 60%; }
#inner_2 { width: 40%; }

Then setting the width of the outer div will change them (a width of 400px will make inner_1 240px and inner_2 will be 160px; a width of 800px will make them 480 and 320 etc)

However, if the widths are set like this:

#inner_1 { width: 300px; }
#inner_2 { width: 200px; }

then no, setting the with of outer will not change the inner widths.

---

You can use selectors to achieve that. For example you could use #rightColumn * {/* your styles here */} to set the properties for all elements inside you right column or #rightColum .childSelector {/* your styles here */} to set the styles for a group of elements/a single element that match the selector. Use !important to override any other styles if necessary.