• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 665
  • Last Modified:

Resize div element according to browser window width

Hi
Does anyone know how to do the following.

I have a div element that I want to resize according to the width of the visitors browser.

So if the browser window is say 1024px or less, I would want the div to be 100px less wide than the window size

If the browser is greater than 1024, I want the div to be 1000px max.

It would need to work across all major browsers

Any help on this would be apprciated.
Caz

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<div id="divMainContent" style="border: 1px solid black; width:BrowserSizeHere;">test</div>
</body>
</html>

 
0
BeginningWebDesign
Asked:
BeginningWebDesign
1 Solution
 
smaccariCommented:
There you go ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<script>
function resizeDiv()
{
   var newWidth=document.body.clientWidth-100;
   if (newWidth>1000) newWidth=1000;
   document.getElementById("divMainContent").style.width=newWidth;
}
window.onresize=resizeDiv;
</script>
</head>
<body onload="resizeDiv()">
<div id="divMainContent" style="border: 1px solid black; width:100px;">test</div>
</body>
0
 
BeginningWebDesignAuthor Commented:
Thanks smaccari

Regards
Caz
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now