Is there a way in CSS to set the width of any element to equal the width of its parentNode? I tried 'inherit' - sounds logic - but it didn't work.
Thanks in advance.
+1
A:
width: 100%;
This means 100% of the parent element's width.
Note that it might not work if the element has the display property set to something different to "block", and in a few other cases.
If you try it on 2 nested divs, it'll work.
Razor
2010-04-11 18:14:43
This only works properly if the parent element doesn't have any padding set.
animuson
2010-04-11 18:18:06
Of course, unless [box-sizing](http://www.css3.info/preview/box-sizing/) is set to `border-box`, in which case it would work perfectly.There are a few different situations that could make `width: 100%` "break", but in this case it does what the asker was looking for.
Razor
2010-04-11 18:28:57
Well, I have a DIV nested in a <td>. :(
arik-so
2010-04-11 18:32:56
@arik-so: You shouldn't use divisions inside a table.
animuson
2010-04-11 18:36:58
You might want to check the td's width then, because a div inside a table cell is supposed to take the same width. You might also want to try putting `margin: 0 !important; padding: 0 !important;` on the div, because padding and margin might "eat" up some of that element's width.If it still doesn't work, you might want to post your code so we can understand better.
Razor
2010-04-11 18:44:16
A:
Depending on what element it is, setting the CSS property display: block will usually make it automatically fill all possible width, aka stretch to its maximum without overflowing on padding or borders.
animuson
2010-04-11 18:14:45