Set width of div relatively to width of browser window

Question

How can I set the width property of a div so that it is always a percentage of the browser window's width?

For example,

• when the width of the browser window is 1920px, the div's width is 1536px (80%)
• when the width of the browser window is 1600px, the div's width is 1280px (80%)

and so forth?

Answer 1

You should use a wrapper div and set it equal to 100% of the browser width, then put the desired div and set it to width:80%. This will allow you to center your desired div too. (use margin:0 auto for this.)

Here's a JSFiddle with a demo: http://jsfiddle.net/6Lwpr/

Answer 2

vw: Relative to 1% of the width of the viewport

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw