0

To make the issue easier to analyze I have created this jsFiddle:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body {margin:0; }
        #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
        #headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
        #middleContainer { height: 100%; }
        #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; }
        #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; }
        #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; }
        #footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; }
    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="headerContainer">
            headerContainer
        </div>
        <div id="middleContainer">
            <div id="leftSection">
                leftSection
            </div>
            <div id="middleSection">
                middleSection
            </div>
            <div id="rightSection">
                rightSection
            </div>
        </div>
        <div id="footerContainer">
            footerContainer
        </div>
    </div>
</body>
</html>

With the markup of top, middle, and bottom sections, problem is:

1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div

2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.

I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.

Sean Vaughn
  • 3,792
  • 1
  • 16
  • 14
Maya
  • 1,414
  • 5
  • 22
  • 43

5 Answers5

1

http://jsfiddle.net/grc4/XTQuT/2/ does what I wanted exactly without specifying solid height values.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <style>
    body {
    margin: 0;
    height:100%;
    }
#mainContainer {
    position: absolute;
    right: 4%;
    left: 4%;
    height: 100%;
}
#headerContainer {
    width: 100%;
    position: relative;
    background: #323232;
    color: white;
    height: 30px;
}
#middleContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 30px 0;
}
#leftSection {
    float: left;
    width: 175px;
    background: #71ABD1;
    height: 100%;
    overflow: auto;
    color: black;
}
#middleSection {
    position: absolute;
    background-color: yellow;
    left: 175px;
    right: 175px;
    top: 0;
    bottom: 0;
    color: black;
}
#rightSection {
    float: right;
    height: 100%;
    width: 175px;
    border-left: 1px dotted black;
    background: red;
    color: black;
}
#footerContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #323232;
    color: white;
}​
</style>
    </head>
    <body>
        <div id="mainContainer">
            <div id="headerContainer">
                headerContainer
            </div>
            <div id="middleContainer">
                <div id="leftSection">
                    <div style="margin-top: 30px;">leftSection</div>
                </div>
                <div id="middleSection">
                    <div style="margin-top: 30px;">middleSection</div>
                </div>
                <div id="rightSection">
                    <div style="margin-top: 30px;">rightSection</div>
                </div>
            </div>
            <div id="footerContainer">
                footerContainer
            </div>
        </div>
    </body>
    </html>
Maya
  • 1,414
  • 5
  • 22
  • 43
0

The "padding-top: 30px;" on your 3 inner elements is making them 30px taller than the height of the actual body, creating your problem.

Remove the top padding from those 3 elements, then make your header and footer relatively positioned, rather than absolute, and you should be set.

Like this: http://jsfiddle.net/BPJxD/28/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body {margin:0; }
        #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
        #headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; }
        #middleContainer { height: 100%; }
        #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
        #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black;  }
        #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black;  }
        #footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="headerContainer">
            headerContainer
        </div>
        <div id="middleContainer">
            <div id="leftSection">
                leftSection
            </div>
            <div id="middleSection">
                middleSection
            </div>
            <div id="rightSection">
                rightSection
            </div>
        </div>
        <div id="footerContainer">
            footerContainer
        </div>
    </div>
</body>
</html>
Sean Vaughn
  • 3,792
  • 1
  • 16
  • 14
Mike
  • 1,559
  • 10
  • 17
  • That looks better, but this makes the page exceeds its 100% height, for example you can see the vertical scrollbar displayed now, the original idea is to set the contents height to 100% of the page. – Maya Oct 03 '12 at 20:27
0

Your problem was that you were using needless absolute positioning in headercontainer and footercontainer, solution

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div id="mainContainer">
        <div id="headerContainer">
            headerContainer
        </div>
        <div id="middleContainer">
            <div id="leftSection">
                leftSection
            </div>
            <div id="middleSection">
                middleSection
            </div>
            <div id="rightSection">
                rightSection
            </div>
        </div>
        <div id="footerContainer">
            footerContainer
        </div>
    </div>
</body>
</html>

CSS:

body { margin:0; }
#mainContainer
{ 
    position: absolute; 
    right: 4%; left: 4%; 
    height: 100%; 
}
#headerContainer
{ 
    width: 100%; 
    z-index: 10; 
    position: relative; 
    background: #323232; 
    color: white; 
    height: 30px;
}
#middleContainer { height: 100%; }
#leftSection
{
    position: absolute; 
    float: left; 
    width: 175px; 
    background: #71ABD1; 
    height: 100%; 
    overflow: auto; 
    color: black; 
    padding-top: 30px;
}
#middleSection
{ 
    position: absolute; 
    height: 100%; 
    background-color: yellow; 
    left: 175px; 
    right: 175px; 
    color: black; 
    padding-top: 30px; 
}
#rightSection
{
    float: right; 
    height: 100%; 
    width: 175px; 
    border-left: 1px dotted black; 
    background: red; 
    color: black; 
    padding-top: 30px; 
}
#footerContainer 
{  
    position: relative; 
    bottom: 0; width: 100%; 
    height: 30px; 
    background: #323232; 
    color: white;
}

Reviewing your whole Fiddle I noticed that you are using absolute positioning on every div. This is plane wrong.

You should only absolute positioning when:

  1. You need a container that is free of the document's usual formatting. Such as a popup or a floating box.
  2. You need to use a div inside a parent div with fixed positioning, but this will only work if parent positioning is set to relative.
Sean Vaughn
  • 3,792
  • 1
  • 16
  • 14
  • 1
    This gives the same results as the first answer above, layout exceeds 100% of page height which leads to vertical scrollbars. – Maya Oct 03 '12 at 20:54
  • can you post the link of your webpage? @Maya – Sean Vaughn Oct 03 '12 at 20:55
  • I'm trying this locally on my machine, and it gives the same result as your fiddler, yours shows the same scroll bar I see locally here after trying your code. – Maya Oct 03 '12 at 21:06
  • There's nothing wrong with scrollbars. When you set height to 100%, the height is set to 100% i.e. equal to the parent's height. In your case, the container's height. And this is happening because you haven't provided body with a default height. Whenever you use a liquid layout on a `div`, i.e. set it's height or width = 100% make sure you've set it's parent to a solid height like `100px` or something. More on this, here: [link](http://stackoverflow.com/questions/5323177/absolute-vs-relative-position-width-height#5324642) @Maya – Sean Vaughn Oct 03 '12 at 21:52
  • Ok I get your point, thanks, so for this behavior are you saying I need to use Javascript to measure the body's height to have a flexible middle area when users resize their browsers? – Maya Oct 03 '12 at 23:09
  • No need for that. Just give a solid width and height to the parent, a width and height that you know will fit for all your needs. But if you think that your body needs to adjust depending on the clients machine, then yes, you gotta use javascript. @Maya – Sean Vaughn Oct 03 '12 at 23:13
  • http://jsfiddle.net/grc4/XTQuT/2/ does the job for me without specifying solid values here, thanks for the effort though. +1 – Maya Oct 04 '12 at 09:20
  • Well, making the `top`, `bottom`, `left` and `right` values for the `middleContainer` to `0` is clever. It seems to have done the job pretty nicely. Did you figured it out on your own, or you got it from the web? Please link me the page if your sources were from the web. :) @Maya – Sean Vaughn Oct 04 '12 at 13:57
0

You can remove all 3 of 

padding-top: 30px;

like

#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black;  }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black;  }

and change your html like this

<div id="mainContainer">
    <div id="headerContainer">
        headerContainer
    </div>
    <div id="middleContainer">
        <div id="leftSection">
            <div style="margin-top:30px;">leftSection</div>
        </div>
        <div id="middleSection">
            <div style="margin-top:30px;">middleSection</div>
        </div>
        <div id="rightSection">
            <div style="margin-top:30px;">rightSection</div>
        </div>
    </div>
    <div id="footerContainer">
        footerContainer
    </div>
</div>

I hope this can be helpful.

Afshin
  • 4,197
  • 3
  • 25
  • 34
0
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body {margin:0; }
        #mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; }
        #headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
        #middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;}
        #leftSection { float: left; width:25%; background: #71ABD1;  overflow: auto; color: black; padding-top: 30px;  height: 100%;}
        #middleSection { float: left;  height:100%; width:50%; background-color: yellow;  color: black; padding-top: 30px; }
        #rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; }
        #footerContainer {  bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;}
    </style>
</head>
<body>
<div id="mainContainer">
  <div id="headerContainer"> headerContainer </div>
  <div id="middleContainer" >
    <div id="leftSection"> leftSection </div>
    <div id="middleSection"> middleSection </div>
    <div id="rightSection"> rightSection
      rightSection            rightSection            rightSection            rightSection            rightSection            rightSection            rightSection </div>
  </div>
  <div id="footerContainer" > footerContainer </div>
</div>
</body>
</html>
Anil kumar
  • 136
  • 2