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.