Scribd Logo
Upload

Welcome to Scribd!

  • Extensions

    Uploaded by

    ajoydhas
    6 views2 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views2 pages

    Extensions

    Uploaded by

    ajoydhas

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Equal Height in Css</title>

    <style type="text/css">

    #container {
    width: 150px;
    float: left;
    padding: 0;
    background: #0099FF;
    }

    #sidebar {
    width: 150px;
    float: left;
    padding: 0;
    background: #FF0000;
    }

    #sidebar1 {
    width: 150px;
    float: left;
    padding: 0;
    background: #33FF00;
    }
    </style>

    <script type="text/javascript" src="x.js"></script>

    <script type="text/javascript">
    function adjustLayout()
    {
    // Get natural heights
    var cHeight = xHeight("container");
    var lHeight = xHeight("sidebar");
    var rHeight = xHeight("sidebar1");

    alert(cHeight);

    alert(lHeight);

    alert(rHeight);

    // Find the maximum height


    var maxHeight =
    Math.max(cHeight, Math.max(lHeight, rHeight));

    // Assign maximum height to all columns


    xHeight("container", maxHeight);
    xHeight("sidebar", maxHeight);
    xHeight("sidebar1", maxHeight);
    // Show the footer
    xShow("footer");
    }

    window.onload = function()
    {
    xAddEventListener(window, "resize",
    adjustLayout, false);
    adjustLayout();
    }
    </script>

    </head>

    <body>
    <table border="1" cellpadding="0" cellspacing="0" id="setheight">
    <tr>
    <td>
    <div id="container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
    mauris est, ultrices a, ullamcorper eget, pharetra nec, leo. Duis in nisl. Ut
    volutpat leo non dolor. Mauris diam ipsum, commodo eget, feugiat molestie, feugiat
    quis, lacus. Suspendisse at nibh id metus lacinia rutrum. Nunc nisl. Vivamus mi.
    Maecenas vitae odio. </div>
    <div id="sidebar">Content for id "sidebar" Goes Here</div>
    <div id="sidebar1">Content for id "sidebar1" Goes Here</div>
    </td>
    </td>
    </table>
    </body>
    </html>

    You might also like