dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] floating divs won't fill height

  1. #1
    Join Date
    Oct 2005
    Posts
    45

    resolved [RESOLVED] floating divs won't fill height

    Seems like a much discussed subject.
    I tried everything but cannot seem to make this work:

    I want leftcolumn to fill the entire height which is created by the content of rightcolumn. No matter what I try the leftcolumn only fills the background color to the extend of its contents. Also if there is no content there is no background color (as I have not set a height in pixels).

    CSS:

    html {
    height: 100%;
    margin-bottom: 1px;
    }

    body {
    font-family: Arial,sans-serif;
    line-height: 1.3em;
    font-size: 12px;
    color: #333;
    height: 100%;
    }

    #top {
    background: url('/images/stories/overige/top.jpg') 0 0 no-repeat;
    width: 960px;
    height: 116px;
    }

    .floatfix {
    clear: both;
    }

    #containcell {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 955px;
    }

    #container {
    margin-top: 0px;
    width: 955px;
    }

    #leftcolumn {
    margin: 0px;
    padding: 0px;
    background: #69c;
    width: 170px;
    height: 100%;
    float: left;
    }

    #rightcolumn {
    width: 765px;
    float: left;
    margin-left: 20px;
    }

    html:

    <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <body>

    <div id="containcell">
    <div id="top">
    <jdoc:include type="modules" name="top" />
    </div>
    <div id="container">
    <div id="leftcolumn"><jdoc:include type="modules" name="left" /></div>
    <div id="rightcolumn"><jdoc:include type="component" /></div>
    <div class="floatfix"></div>
    </div>
    </div>

    </body>
    </html>

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Fluid designs a great, but they tend to be fluid to the browser size, not the content size.

    leftcolumn is a height of 100&#37; It's container has no height so it is 100% of nothing

    You are going to have to set a height for container. Don't use percentages either as container has the same problem. It's container (containcell) has no height either.

    It would be nice if height:auto worked, but it does not.

  3. #3
    Join Date
    Oct 2005
    Posts
    45
    Yes that works, but not really.
    The result is not what I want as I need to set the height beforehand and so it does not adjust to the height of rightcolumn..

  4. #4
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    If you want to have a layout fluid to the content, then I hate to say it, but a simple two row, two column table might work better for you.

    Tables tend to be fluid where content is concerned (one of the reasons they are so difficult to work with on rigid page layout specific designs - the content size overrides the layout)

  5. #5
    Join Date
    Oct 2005
    Posts
    45
    Solved it by adding a background image to the container. The image includes color for the leftcolumn.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles