Search code examples
htmlcsspositionoverflow

css div positioning and overflow issue, hard time understanding

I am having some trouble understanding why some of my DIVs are not expanding to my "content" DIV's height. It has to be css/html only.

VISUAL IMAGE (IMGUR)

HIERARCHY

-[+]wrapper
----[-]left (will contain navigation bar)
----[-]right (used just to center the "center" div, may have content)
----[-]center (center of page containing content)
--------[o]header (will only have small line of text)
--------[o]content (when height overflows, it should expand all other heights)
----[-]footer (resource & contact links, should always be at the bottom)

CSS

  *{
        font-family: Arial Black,Arial Bold,Gadget,sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;    
        border:0px;
        margin:0px;
        padding:0px;
    }
    .wrapper{
        position:absolute;
        width:100%;
        height:100%;
        background-color:black;
    }
    .left{
        position:absolute;
        left:0px;
        width:220px;
        height:100%;

        background-color:red;
    }
    .right{
        position:absolute;
        right:0px;
        width:220px;
        height:100%;

        background-color:blue;
    }
    .center{
        position:absolute;
        right:220px;
        left:220px;

        background-color:yellow;
    }
    #header{
        float:left;
        height:40px;
        width:100%;
        background-color:silver;
    }
    #footer{
        position:absolute;
        bottom:0px;
        height:20px;
        width:100%;

        background-color:silver;
    }
    #content{
        float:left;
        top:40px;
        bottom:20px;
        margin:20px;

        background-color:orange;
    }

HTML

<body>
    <div class="wrapper">
        <div class="left">
        </div>
        <div class="right">
        </div>
        <div class="center">
            <div id="header">
            </div>        

            <div id="content">
            </div>

        </div>
        <div id="footer">
            </div>
    </div>
</body>

Here is my jfiddle: JFIDDLE

Solution

  • you set .wrapper div's position:absolute, and height 100%;,so it only take the height of container in which he is,(that's how absolutely positioned elements work)

    the problem is i think you are over-using absolute positions a little bit,see its a powerful tool but not that good for layout compositions , you can use either the float base layout, or in-line blocks or flex layouts

    flex will work like

    .wrapper {
display: flex;
}

.left {
  flex-grow: 1 
}
.right {
  flex-grow: 1 
}
.content {
  flex-grow: 3 
}

    but you have to put footer out of the wrapper or you can add an other child div like 

    <div class="wrapper">

    <div class="main">
          <div class="left"></div>
          <div class="right"></div>
          <div class="center"></div>
    <div>

    <div id="footer"></div>

</div>

    now just add the flex property to main, and flex grow to childrens

    remember flex work on rations , the above css means the .contnet dive will take 3 times the width of .lef or .right div

    i.e 20% width for left, 20% width for right, 60% width for center,