Search code examples
htmlwidthoffsetwidth

HTML - To get the div width and height before populating it with content

I need to get the actual width and height of the shareddiv before populating it with content so that i can determine how many panels can fit into the shareddiv based on the device or browser resolution

<div id="outerdiv">
<div style="width: 100% ;height:100%;" id="sharedDiv" ></div>
</div>

The alert returns different values at different locations in the code. 

var divow = document.getElementById('sharedDiv').offsetWidth;
        alert("div offsetwidth"+divow);
Solution

  • you'll only ever get a valid measurement once the DOM and your resources (CSS and images) are loaded. until that happens elements in the page may move around and change size (progressive rendering). therefore you should do your measurements in an event handler like onload. you should also recalculate on a resize event.