Scable text size and child div maintaining proportions to parent div as parent div's size changes

[matt98]

Hi there, After many hours searching for the answer to what I thought was a relatively simple query, I am still no wiser. I hope an expert here will be able to help me with the following - How do you maintain the proportions of child div as its parent gets larger, when the parent is set to width:auto (to fill the browser)? For example say the parent is 1000px X 400px and its child is 200px X 100px; when the browser is resized and changes the parent to 500 x 200, what is the CSS code to ensure the child div changes size with it, proportionally, making it 100 px X 50px? This is because I have come across a JS plugin to scale the text to fit the div. Many thanks in advance, I look forward to reading the response. Matt

[ShadowMage]

You can use percentages, but the parent div must have both height and width specified in order to work. Instead of width: auto; use width: 100%; WIth a div element, the effect is the same (unless you have borders, margins, or padding on it). Height can be a little trickier (depending on how you need it to behave), but a percentage value should work fine.

[Ingolme]

One big problem is that when you set width to 100% you must remember that adding any padding, margin or borders will cause the box to extend outside the window making scrollbars appear.

[matt98]

Thanks very much for this. You guys are a great help. I may be back some time soon...