I am sure this problem has been asked before but I cannot seem to find the answer.
I have the following markup:
<div id="foo"> <div id="bar"> here be dragons </div> </div>
My desire is to make foo to have width of
width: 600px;) and to make bar have the following behaviors:
padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; outerWidth: 100%;
In other words instead of setting width of bar to
592px I would like to set the outer width of bar to
100% so that it is computed to
592px. The importance here is that I can change foo's width to
800px and bar will calculate when rendered instead of me having to do the math for all these instances manually.
Is this possible in pure CSS?
Some more fun with it:
- What if
#baris a table?
- What if
#baris a textarea?
#baris an input?
#foois a table cell (
td)? (Does this change the problem or is the problem identical?)
So far the
input#bar has been discussed. I have not seen a good solution for textarea#bar. I Think a textarea with no border/margin/padding with a
div wrap might work with the
div styled to work as borders for the