asked on

CSS make everything within a div smaller then originally intended

Is there a way to make everything within a div a certain percentage smaller then it would be if the div was not there? I was thinking maybe with a CSS class or something in that direction. With this I mean that if a height and width is originally 100 on tables and images and son on, then it is auitomatically reduced to 70 next time the page loads if I insert the div there with serverside scripting. I am trying to avoid rewriting all the heights and widths, I just want to downsize them by 30% in this example, all together.

IanTh

see
http://stackoverflow.com/questions/572783/how-can-i-scale-a-div-to-100-height-and-width-inside-of-another-element

Ess Kay

if you have the items already connected to a class you can do the following

substitute the code inside the css for what yu want it to accomplish : ie: height, width

CSS sheet:

.area1
{
border:1px solid black;
}
.area1 .item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2 .item
{
color:blue;
}

HTML

<div class="area1">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
<div class="area2">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>

itnifl

ASKER

None of this is actually what I was looking for. I was looking for a way to wrap an area of a html page and resize it smaller then originall. Thus resizing by a percentage of what is coded there from before.

SOLUTION