SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need proper alignment with two div tags.....one on left and the other on right

    hi every one,

    need proper alignment with two div tags.....one on left and the other on right

    these tags have to occupy the entire page.......and crossbrowser support

    I have to display tree in the left div tag and a table in the right div tag

    the left div tag has to be scrollable.....and the table has to be displayed in the center part of the right div tag.

    thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    need proper alignment with two div tags.....one on left and the other on right
    these tags have to occupy the entire page.......and crossbrowser support
    Hi,
    From what I understand you are wanting two divs each to be 50% wide and 100% tall. See if this is what you are wanting to do, You will have to put the right table in there yourself but the divs should be what you are wanting if I understand correctly.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>100% Height Scrolling Columns</title>
    <style type="text/css">
    * {
       margin:0;
       padding:0;
    }
    html, body {
        height: 100%;
        margin:0;
        padding:0;
        overflow:hidden;/*remove scrollbars*/
    }
    #main {
        width:100%;
        height: 100%;
        overflow:hidden;/*contain inner floats*/
    }
    #left {
       width: 50%;
       float: left;
       height: 100%;
       overflow:auto;
       background: #CCC;
    }
    #right {
       float: right;
       width: 50%;
       margin-left:-1px;/*combat IE6/7 & FF2 rounding errors*/
       height: 100%;
       overflow: auto;
       background: #BBB;
    }
    p {padding:20px 10px;} /*for testing only*/
    </style>
    </head>
    <body>
    <div id="main">
        <div id="left">
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
            <p>Scrolling Content</p>
        </div>
        <div id="right">
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>          
        </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply...

    Not 50% but 30% and 70%

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Then change the widths on #left and #right to 30% and 70%
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the flexible code,
    can it be possible to add header and footer part, both occupying 30%,30% of the page height

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Something like this
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>100% Height Scrolling Columns</title>
    <style type="text/css">
    * {
       margin:0;
       padding:0;
    }
    html, body {
        height: 100%;
        margin:0;
        padding:0;
        overflow:hidden;/*remove scrollbars*/
    }
    #main {
        width:100%;
        height: 100%;
        overflow:hidden;/*contain inner floats*/
    }
    #header {
        width:100%;
        height:30%;
        background: #8088C6;
        overflow:auto;
    }
    #left {
       width: 30%;
       float: left;
       height: 40%;
       overflow:auto;
       background: #EEEEFF;
    }
    #right {
       float: right;
       width: 70%;
       margin-left:-1px;/*combat IE6/7 & FF2 rounding errors*/
       height: 40%;
       overflow: auto;
       background: #BDC2E2;
    }
    #footer {
        clear:both;
        width:100%;
        height:30%;
        background: #8088C6;
        overflow:auto;
    }
    p {padding:20px 10px;} /*for testing only*/
    </style>
    </head>
    <body>
    <div id="main">
        <div id="header">
            <p>Header Content</p>
            <p>Header Content</p>
            <p>Header Content</p>
        </div>
        <div id="left">
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
        </div>
        <div id="right">
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>
            <p>Right Content</p>          
        </div>
        <div id="footer">
            <p>Footer Content</p>
            <p>Footer Content</p>
            <p>Footer Content</p>
        </div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •