If you want to change the width of your main div or main table element in ASP .NET, you can use margin-left: auto; and margin-right: auto; to dynamically change the width of these elements based on the browser width, but this width will vary when you change you’re browser screen and older browser (IE6) don’t support the min-width css statement. If you want to have an exact width of the main element you can set the width by using css, but then you will have to choose a fixed value for all user screen resolutions. With the use of javascript, you can change the css value dynamically based on the user screen resolution.

If the main table or main div has an exact width, you can base all other layout inside relative to this width, by using margin’s and padding’s.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Rvl.HelperTools.Website._Default" %>

<!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 runat="server">
    <title>Untitled Page</title>

    <!-- Load css styles -->
    <style type="text/css">
        .Main
        {
            background-color:Silver;
            margin-left: auto; /* Center mainTable for >= IE6  */
            margin-right: auto; /* Center mainTable for >= IE6  */
            width: 800px;
        }
    </style>

    <!-- Correct css styles based on user screen resolution -->
    <script language="javascript" type="text/javascript">

        // Find the first css class based on parameter [className].
        function GetStyleClass(className) {

            // Loop all loaded css style sheets
            for (var s = 0; s < document.styleSheets.length; s++) {

                // Check if browser uses [rules]
                var rules;
                if (document.styleSheets[s].rules) {
                    rules = document.styleSheets[s].rules;
                }

                // Check if browser uses [cssRules]
                if (document.styleSheets[s].cssRules) {
                    rules = document.styleSheets[s].cssRules;
                }

                // Check if browser supports css rules
                if (rules) {
                    // Loop rules in css stylesheet
                    for (var r = 0; r < rules.length; r++) {

                        // Stop search and return rule, when classname is found
                        if (rules[r].selectorText == '.' + className) {
                            return rules[r];
                        }
                    }
                }
            }

            // If css class not found, return null.
            return null;
        }
        // Convert a css px value to int.
        function ConvertCssPxToInt(cssPxValueText) {

            // Set valid characters for numeric number.
            var validChars = "0123456789.";

            // If conversion fails return 0.
            var convertedValue = 0;

            // Loop all characters of
            for (i = 0; i < cssPxValueText.length; i++) {

                // Stop search for valid numeric characters,  when a none numeric number is found.
                if (validChars.indexOf(cssPxValueText.charAt(i)) == -1) {

                    // Start conversion if at least one character is valid.
                    if (i > 0) {
                        // Convert validnumbers to int and return result.
                        convertedValue = parseInt(cssPxValueText.substring(0, i));
                        return convertedValue;
                    }
                }
            }

            return convertedValue;
        }

        // Get main table css class
        var mainClass = GetStyleClass('Main');

        // Change main table width based on user screen resolution.
        if (mainClass) {

            // Use default css width, if screen width is less then default css width.
            var width = ConvertCssPxToInt(mainClass.style.width);

            // Use screen width - 50px if screen width is greather the default css width.
            if (screen.width > width) {
                width = screen.width - 45;
            }

            // Change the width of the main table
            mainClass.style.width = width + 'px';
        }
    </script>
</head>
<body>

    <form id="form1" runat="server">
    <div class="Main">
        <p>Some text</p>
        <p>Some more text...</p>
    </div>
    </form>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.