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
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts

    Stretching of divs positioned next to each other

    I finally might have encountered a problem where I need to use a table. You guys are my last hope.

    I have two divs positioned next to each other in a container div. They don't need to have 100% height, but either the container div, either the left div needs to stretch when the right div is being expanded by extra content.

    I'll try to reproduce my problem in a simple page to make it clear.
    Code:
    <!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>
        <title>Untitled Page</title>
        <style type="text/css">
            body,html 
            {
                height:100%;
                width:100%;
                margin:0px;
            }        
            div.container 
            {
                background-color:Red;
            }    
            div.left 
            {
                width:50%;
                background-color:yellow;
                float:left;
            }        
            div.right 
            {
                background-color:green;
                width:50%;
                float:right;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">
                Left text
            </div>
            <div class="right">
                Right text
                <br />
                The left div should stretch with this one.
            </div>
        </div>
    </body>
    </html>
    So when text is added to the left or the right div, either the container div, either the div next to it needs to stretch to the same height, whichever is easier to achieve. Adding heights doesn't help when the content exceeds that height.

    I'm really out of ideas. Anyone able to lend me a hand?
    Last edited by snowieken; 04-10-2009 at 04:25 AM.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Nevermind, adding a div with clear:both inside the container div seemed to have done the trick...
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello snowieken,
    Some things that might help you here.

    Instead of adding a useless div to clear floats, try overflow:auto; - this tutorial explains.

    To make an equal height 2column layout, no matter which column has more content, check out faux columns.
    Here's a 3 column example - http://nopeople.com/CSS/faux_columns/index.html

    And here's an example using only background colors. This method would work well with the code you posted - http://nopeople.com/CSS/equal_length_columns/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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