CSS 100% height DIVs

Question

I asked yesterday a question about css div positioning, now I solved my issue with your answers, but now I have another problem let me try to explain,

I have a page as shown above, I want that "B" div has 100% height but there is something wrong with absolute divs when "C" has long content then "B" is not following "C" and the 100% height doesn't work. When the position property of is set to fixed then it works on IE but not on chrome.

Here is the CSS code,

 *
    {
        padding: 0;
        margin: 0;
    }


    #container
    {
        background-color: Fuchsia;
        height:100%;
        width:100%;
        position: absolute;

    }


    #a
    {
        width: 100%;
        height: 100%;
        background-image: url(images/img01.jpg);
        background-repeat: repeat-x;
        position: absolute;
        z-index:0;
    }



    #b
    {
        margin-left: 40px;
        float: left;
        background-image: url(images/left_menu_filler.jpg);
        background-repeat: repeat-y;
        position: absolute;
        margin-top: 0px;
        height: 100%;

    }

    #c
    {
        width: 800px;
        height: 10200px;
        margin-top: 125px;
        margin-left: 230px;
        background-color: #999999;
        position: absolute;


    }



    #d
    {
        width: 0px;
        height: 0px;
        margin: 10px 20px 0px 0px;
        background-color: #ff0220;
        position: absolute;
    }

    #e
    {
        width: 300px;
        height: 26px;
        margin: 0px 80px 0px 0px;
        float: right;
        background-color: #ff0220;
    }

Can you please help me with that problem ? Which properties should I change ?

Answer 1

If you're just trying to extend a background color to the bottom of the page, you could implement some good ol' faux columns:

http://www.alistapart.com/articles/fauxcolumns/

The idea is that you add a background-image to your container div (or body element) that is the same width as column "B". Use background-position to get it aligned correctly, then set background-repeat to repeat-y.

Also, for what it's worth, Using absolute-positioning for every element in your document is almost certainly going to cause more problems than it solves. I'd recommend making a better attempt at using the normal document flow to get your layout to work.