How to make div scalable by using percentage in CSS


Tags: css,html5,css3

Problem :

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


img {
  width: 100%;
  height: 98%;
}

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 450x300 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


div {
  min-width: 450px;
  min-hieght: 300px;
  width: 100%;
  height: 100%;
}

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.



Solution :

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.


    CSS Howto..

    how to add JS and CSS tags from module without using header hook

    Responsive Design - how to get my image on left to take up whole screen

    How do I enlarge images on a web page

    How to apply a CSS property to an element using it's CSS path in Javascript?

    How do i check if a link has been visited?

    How to draw with CSS canvas a slideshow frame?

    How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

    How to change iframe src using css

    How to center text with CSS?

    How does Media Queries Reacts

    how to render tilted images in html or css or javascript ..?

    CSS: How does setting a right margin cause the element's parent to become visible in this example?

    How to have the nav and footer more than 1000px?

    how to create an alphabet letter selector that spans an entire div width

    Show content only in printing page not in browser page using CSS or javascript

    How to reset a slideshow after the last picture is shown

    How to build a complex table by using CSS?

    Use CSS to show two div's with background image over a containing div

    How to make css background-blend-mode work with gradients?

    Need help determining how to position this element with CSS

    How to neutralize CSS definitions without overriding

    How to create CSS gradient from the centre? [closed]

    Unicode character, down triangle, shows up as strange text

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]

    How to remove the default active tab color when another tab is active using jquery

    How to make a div scroll able when window height is reached

    How to prevent page margin from expanding in HTML/CSS code when window is resized

    How to fix Image on top of text with css

    how to override min-width

    How do I create a 3 nested stamina bar that will regenerate from last to first