Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to make 2 columns, 1 fluid?

    Ok, so I have a div box, that contains rows with 2-column layouts. The left column is text, and the right column is an image. When the number of rows gets high, a vertical scrollbar will appear. However, when that happens, the scrollbar covers part of the image. I would like to have the left column shrink so that the image won't be covered. Is that possible to have it automatically resize?

    Also, I'm using AJAX to determine the number of rows, so I can't always assume there will be a scrollbar.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    .mainBox {
    width:400px;
    height: 150px;
    margin:0px;
    padding:0px;
    text-align:left;
    overflow : auto;
    }
    
    .rowBox {
    width: 400px;
    height: 150px;
    padding:0px;
    }
    
    .leftRow {
    width:300px;
    height: 150px;
    padding:0px;
    float:left;
    background:white;
    }
    
    .leftTop {
    width:300px;
    height: 100px;
    padding:0px;
    float:left;
    background:gray;
    }
    
    .leftBottom {
    width:300px;
    height: 50px;
    padding:0px;
    float:left;
    background:yellow;
    }
    
    .rightRow {
    width:100px;
    height: 150px;
    padding:0px;
    float:left;
    background:green;
    }
    </style>
    </head>
    <body>
    <div class="mainBox">
    <div class="rowBox">
    <div class="leftRow">
    <div class="leftTop">top box</div>
    <div class="leftBottom">bottom box</div>
    </div>
    <div class="rightRow"><img src="image.gif" width="100" height="50" align="right"></div>
    </div>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you using overflow:auto; on .mainBox? Check out this example
    http://bonrouge.com/2c-hf-fluid(r).php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The thing about that is, it uses the entire page for the 2 columns, but I need to just constrain it within a div. I'll still try that though, and see if it works.


  •  

    Posting Permissions

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