Css Div Re-sizing According To Web Browser

I have a few divs on my code all of them positioned correctly how i want it. The only problem is that they do not re size when i shrink the page. I want to be able to re size them

Solution 1:

Set their sizes to percent values rather than pixels (I asume that's what you're using)

Solution 2:

Set all divs with percent values.

Or

You can use 'media rules' of css3:

@media screen and (max-width: 300px) { .div-a { background-color: lightblue; } }

Solution 3:

You have basically 3 options

1. Bootstrap (http://getbootstrap.com/)
2. Use percent values instead of pixels
3. Use vh (view height) and vw (view width). Here's an example: http://jsfiddle.net/7m55nur1/

Note that width: 75vw; keeps the div width at 75% of the web browser. Same as margin-left: 12.5vw which keeps the margin on the left at 12.5% of the browser size.

Solution 4:

I figured it out, basically what i did what get the width (lets say it's 300 pixels) and figure out the percent of the page width (in my case is 1900 pixels). The result would be 15.789473684210526% putting that exact value worked just fine! As accurate as a pixel. I used this tool:

http://www.onlineconversion.com/percentcalc.htm

Thank you all for your replies!