Web Analytics Made Easy -
StatCounter Stretching of divs positioned next to each other - CodingForum

Announcement

Collapse
No announcement yet.

Stretching of divs positioned next to each other

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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; Apr 9, 2009, 11:25 PM.
    -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
    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.

    Comment


    • #3
      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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

      Comment

      Working...
      X