css div positioning and overflow issue, hard time understanding

Question

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

When i was researching the absolutes, it said to use relative in the wrapper and absolute in children. But when I put relative in the wrappers css, the whole page dispears from the window. — John Doe, Apr 07 '16 at 12:49

score 0 · Answer 1 · edited May 23 '17 at 10:29

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */

  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor</div>
  <div class="col">Lorem ipsum dolor sit amet</div>
</div>

Refer this link you will get the solution for it or if you don't want to use css then go for Javascript. Refer this jquery plugin for that purpose - jquery-match-height

Hassan Nisar Khan · Accepted Answer · 2016-04-08T10:15:20.973

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,

Thank you, I appreciate the tip. I thought using positions was a more popular method based on all the help topics I read. I'm going to look into the flex method tonight. Which will hopefully fix this. I always seem to have problems with div positioning. — John Doe, Apr 07 '16 at 17:25

css div positioning and overflow issue, hard time understanding

2 Answers2