Question

Hi I have a question about scalable div. I know we could do something like

<pre>
    <code>
        img {
            width: 100%;
            height: 98%;
        }
    </code>
</pre>

And that would make the image scalable when resizing the windows. But how do I achieve the same effect in plain div? I want to specify min-width and min-height as well. So, I want the div to be 450×300 regarding the content inside the div, but when the windows is resized the div needs to be able to reflect its size to the windows as well. However, when I do something like

<pre>
    <code>
    div {
        min-width: 450px;
        min-height: 300px;
        width: 100%;
        height: 100%;
    }
    </code>
</pre>

It doesn’t work as I suspect for all browsers as well. Please suggest me to solve this problem.

Updated
Here is my code example http://jsfiddle.net/noppanit/Xfpp7/

What I’m trying to do is to have to div of “Some text” has the same size as the image regardless of how big the image is. And when you resize the windows the “Some Text” shrinks or grows in the same rate as the image. Not sure if this is possible at all in plain CSS, HTML. Thanks a lot.

Answer 1

OK, two potential problems:

• You have a typo in your min-height
• Did you specify the height of the container of the div too? For instance, if the div is directly in body, you must give the body a specific height, of the browser won’t know what it is.

Edit:
To answer your comment, if you want the div to be 450 pixels wide on large screens, but to shrink when the screen is smaller, you need max-width instead of min-width.