0

I've spent countless hours trying to fix my CSS/Divs up and searched online for great help and tutorials. Unforunately, I have given up coming this far in progress in my code.

What I already have is a layout with a header, header bar underneath it, following by a left side navigation pane and the body of the page on the right of it. Furthermore, there's a footer at the end of the page that I want to always touch the bottom of the window and have both the navigation pane and body div to stretch to it.

I kind of got it working... although it's not reaching the bottom of the page entirely. Have a look... I'm not sure what I'm doing wrong!

enter image description here

Please help!!!

Thank you.

Code:

<div id="wrapper1">
  <div id="header1">
    <p><strong>sdfsdfsdf</strong></p>
  </div>
  <header id="navigation1" align="center">
    header bar here
  </header>
  <div id="contentliquid1">
    <div id="content11">body of the page here</div>
  </div>
  <div id="leftcolumn1" valign="top">navigation pane here</div>
  <div id="footer1" align="center" style="display: table;">
    <div style="display: table-cell; vertical-align: middle;">asdasdasd</div>
  </div>    
</div>

CSS:

body,html {
  background-color: #D5DAE0;
  background-image: url();
  background-repeat:no-repeat;
  background-attachment:scroll;
  background-position:top;
  margin: 0px;
  padding: 0px;
  height:100%;
} 
div {
  border-width: 1px;
  border-spacing: 1px;
  border-style: solid;
  border-color: #999999;
  border-collapse: collapse;
  border-left: 0px;   
  border-right: 0px;  
}
#wrapper1 {
    width: 100%;
    min-width: 962px;
    max-width: 962px;
    margin: auto;
    height: 100%;
    margin-bottom: -30px;
    position: relative;
}
#header1 {
    float: left;
    height: 75px;
    width: 100%;      
    border: 0px;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
}
#navigation1 {
    float: left;
    height: 32px;
    width: 100%;
    border: 0px;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
}
#contentliquid1 {
    float: left;
    width: 100%;
    height: 100%;
    margin-bottom: -30px;
    position: relative;
    border-left: 1px solid #999999; 
    border-right: 1px solid #999999;   
}
#content11 {
    margin-left: 260px;
    height: 100%;
    border: 0px;
}

#leftcolumn1 {
    float: left;
    width: 241px;
    margin-left: -100%;
    border-left: 0px;
    border-right: 1px solid; 
    border-color: #999999;
    min-height: 100%;
    margin-bottom: -1px;
    position: relative;
}
#footer1 {
    height: 30px;
    width: 100%;
    clear: both;
    border: 0px;
    border-left: 1px solid; 
    border-top: 1px solid; 
    border-color: #999999;
    position: relative;
}
Pragmateek
  • 13,174
  • 9
  • 74
  • 108
theflarenet
  • 642
  • 2
  • 13
  • 27
  • this post has what your looking for a ["sticky footer"](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) – jcjunction Jun 24 '14 at 21:40
  • I've tried applying the same code to mine but it doesn't work well with my left navigation panel next to the body. I really don't understand why. :-( – theflarenet Jun 24 '14 at 21:53
  • do you have a wrapper for the content (one that goes around your left navigation bar and the "main" div)? I think if you don't that might be able to get the other code working – jcjunction Jun 24 '14 at 22:23

1 Answers1

2

Looks like you want something like this: http://jsfiddle.net/zuGLH/29/ ??

Force the footer to stay at the bottom of the window (not the end of the content):

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

And then I flexed out the two middle columns to fill:

.body {
  clear: both;
  display:flex;
  flex-direction: row;
  align-items: stretch;
}

EDIT: And to make sure the columns fill the available height, first make sure the page does:

html, body {
  height: 100%;
}

And then add to whatever else should fill:

.body {
  height: 100%;
}

In the case of the columns, add the height to their parent container.

Kaceykaso
  • 240
  • 4
  • 11
  • This is excellent but how do I make "sideNav" and "main" both stretch down to the footer with a background color along with that border line in between? Have a look: http://jsfiddle.net/Rx276/ – theflarenet Jun 25 '14 at 03:06
  • You should be aware that this solution is only IE11+ http://caniuse.com/#feat=flexbox – chris vdp Jun 26 '14 at 18:43
  • @Kaceykaso Yes however the sideNav and main stretch beyond footer and the footer does not remain to the bottom of the window. I was looking forward to seeing both sideNav and main stretch up to the top border of the moving footer. – theflarenet Jun 30 '14 at 14:47