Home/ Questions/Q 4022740
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:30:48+00:00

I asked yesterday a question about css div positioning, now I solved my issue

  • 0

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,

enter image description here

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0