Resize div element according to browser window width

Posted on 2006-04-18
Last Modified: 2013-11-19
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
    <title>Untitled Page</title>
<div id="divMainContent" style="border: 1px solid black; width:BrowserSizeHere;">test</div>

Question by:BeginningWebDesign
    LVL 9

    Accepted Solution

    There you go ;)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="" >
        <title>Untitled Page</title>
    function resizeDiv()
       var newWidth=document.body.clientWidth-100;
       if (newWidth>1000) newWidth=1000;
    <body onload="resizeDiv()">
    <div id="divMainContent" style="border: 1px solid black; width:100px;">test</div>

    Author Comment

    Thanks smaccari


    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
    JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
    Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now