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>

 
BeginningWebDesignAsked:
Who is Participating?
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.