CODEWITHSUNDEEP
htmlcsscss-positionfooter
Courtneylee
Courtneylee

Reputation: 21

CSS Positioning: Left hand long menu appears behind footer

I have a CSS two column layout which is fixed and centered. On pages where the navigation is long and the content is short, the footer is not repositioning to below the navigation - it remains at the min-height of the content area and the navigation falls behind the footer.

I have included everything in the fiddle for you to see: http://jsfiddle.net/fmJqw/1/

But essentially, i have the following structure:

<div id="wrapper">
   <div id="headerWrapper"></div>
   <div id="bcrumbwrapper"></div>
   <div id="midWrapper">
      <div id="navWrapper"></div>
      <div id="contentWrapper"></div>
   </div>
   <div class="clear"></div>
   <div id="footerWrapper"></div>
</div>

The CSS is as follows:

#wrapper{
    padding:0px;
    margin:0 auto;
    width:1000px;
    min-height:768px;
}
/*Header styles*/
#headerWrapper{
    padding:0px 0px 0px 0px;
    margin:0px;
    width:1000px;
    height:175px;
    position:relative;
}

#bcrumbWrapper{
    padding:0px 0px 0px 20px;
    margin:0px;
    width:980px;
    min-height:24px;
    position:relative;
}

#midWrapper{
    padding:0px;
    margin:0px;
    width:1000px;
    height:auto;
    position:relative;
}

#navWrapper{
    padding:20px 0px 0px 20px;
    margin:0px;
    float:left;
    width:200px;
    min-height:513px;
    position:absolute; 
    top:0; 
    bottom:0;
}

#contentWrapper{
    padding:15px;
    margin: 0px 0px 0px 220px;
    float:left;
    width:750px;
    min-height:503px;
    position:relative;
    background-color: #FFFFFF;
}

#footerWrapper{
    padding:5px 0px 0px 0px;
    margin:0px;
    width:1000px;
    height:40px;
    position:relative;
}

Upvotes: 1

Views: 614

Answers (2)

Courtneylee
Courtneylee

Reputation: 21

Because I was trying to float both items to the left, but using absolute positioning for one of the divs, things were competing. I removed the float on the content wrapper and removed absolute positioning on the navigation wrapper. I then changed the background colour of the containing div to ensure that it appeared as if the navwrapper ran the length of the page.

So it became:

#midWrapper{
    padding:0px;
    margin:0px;
    width:1000px;
    height:auto;
    position:relative;
    background-colour: #EBE2CA;
}

#navWrapper{
    padding:20px 0px 0px 20px;
    margin:0px;
    float:left;
    width:200px;
}

#contentWrapper{
    padding:15px;
    margin: 0px 0px 0px 220px;
    width:750px;
    min-height:503px;
    position:relative;
    background-color: #FFFFFF;
}

No changes to the HTML and no JavaScript needed!

Upvotes: 1

JasonMortonNZ
JasonMortonNZ

Reputation: 3750

You could always dynamically change min-height with a bit a javascipt, based on the height of the div that holds the content, which I think is #contentWrapper.

You could check CSS Sticky footer out: http://www.cssstickyfooter.com/ but it would take a bit of fiddling to get it to work due to the nature of your markup.

Upvotes: 0

Related Questions