CODEWITHSUNDEEP
htmlcss
Jumanah Malkawi
Jumanah Malkawi

Reputation: 33

Overlapping middle contents with header and footer divs

Here is a fiddle i tried to make to produce the issue: http://jsfiddle.net/BPJxD/1/

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.

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;
}
<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>

Upvotes: 3

Views: 90

Answers (1)

mplungjan
mplungjan

Reputation: 177960

All of your divs are padding-top 30px and 100% - that makes the container 100%+30px high

Try

height:  calc(100% - 30px);


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:  calc(100% - 30px);
  overflow: auto;
  color: black;
  padding-top: 30px;
}

#middleSection {
  position: absolute;
  height:  calc(100% - 30px);
  background-color: yellow;
  left: 175px;
  right: 175px;
  color: black;
  padding-top: 30px;
}

#rightSection {
  float: right;
  height:  calc(100% - 30px);
  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;
}
<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>

Upvotes: 2

Related Questions