Fluid full height column, sticky footer

HTML & CSS
1

Hi all

I’m sure this is easy but I’m stuck.

I have a simple demo here to illustrate.

http://www.ttmt.org.uk/forum/

It’s a container width a max-width(fluid).

The right column is a set width but the left column is fluid and the footer is sticky at the bottom.

I just need to extend the height of the left column (yellow) so it is 100%, it touches the footer



        <!DOCTYPE html>
        <html>
          <head>
          <title>Title of the document</title>

          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

          <style type="text/css">
            /*--stickyFooter--*/
            html, body {
              height: 100%;
            }

            #wrap {
              min-height: 100%;
              max-width:1000px;
              margin:0 auto;
              border-left:20px solid white;
              border-right:20px solid white;
            }

            #main {
              overflow:auto;
              padding-bottom: 150px;/* must be same height as the footer */
              height:100%;
              min-height:100%;
            }

            footer {
              position: relative;
            	margin:-150px auto 0 auto;
            	height: 150px;
            	clear:both;
            	max-width:1000px;
            	background:red;
            	border-left:20px solid white;
              border-right:20px solid white;
            }
    	
            body:before {/*Opera Fix*/
            	content:"";
            	height:100%;
            	float:left;
            	width:0;
            	margin-top:-32767px;/
            }
            /*--END-stickyFooter--*/

            header{
              height:100px;
              background:#ddd;
            }
            #rightCol{
              height:100px;
              background:#eee;
              width:200px;
              float:left;
            }
            #leftCol{
              margin-left:210px;
              background:yellow;
              height:auto;
              height:100%;
            }
          </style>

          </head>

        <body>

          <div id="wrap">

          	<header>
          	  <h2>Header</h2>
          	</header>

          	<div id="main">
          	  <div id="rightCol">
          	   <h2>Right Col</h2>
          	  </div><!-- #rightCol -->
          	  <div id="leftCol">
          	    <h2>Left Col</h2>
          	   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          	     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          	      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             	     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          	  </div><!-- #leftCol -->
          	</div>

          </div><!--wrap-->

          <footer>
            <div id="footer-container">
              <h2>Footer</h2>
            </div><!-- #footer-container -->
          </footer>

        </body>

        </html>
2

One option is to remove the float on the right column, set the main container to display: table and the two columns to display: table-cell:


#main {
  display: table;
}  

#rightCol{
  [COLOR="#FF0000"]display: table-cell;[/COLOR]
  background:#eee;
  width:200px;
  [s]height:100px;[/s]
  [s]float:left;[/s]
}

#leftCol{
  [COLOR="#FF0000"]display: table-cell;[/COLOR]
  [s]margin-left:210px;[/s]
  [s]height:auto;[/s]
  [s]height:100%;[/s]
}
3

Just realised I had named the columns wrong way round, I had left on right and right on left.

I have updated the demo but can’t edit the post.

ralph.m, I tried your idea but it just makes both columns the height of the text in the right column

4

O, sorry, I thought that’s what you wanted. Your sticky footer method has some flaws in it, so what you really need to do is address that first. They are not easy to do properly (many online guides are flawed). Here is a bulletproof way to do it:

I recommend you go through the instructions there carefully and compare them against your own code, making alterations where necessary. Then we can address the colored columns you want. :slight_smile:

5

ralph.m, I followed the example - now I’ve lost the header completely

http://www.ttmt.org.uk/forum/index1.html

6

Here is what I did to create my faux column. Quite easy.

#wrap {
position:relative;
width:1156px;
margin:195px auto 0;
padding:10px;
z-index:3;
}
#wrap:before { /* faux column for #main */
content:‘’;
position:absolute;
top:10px;
bottom:10px;
box-shadow:2px 2px 5px #555;
border-radius:8px;
background:rgb(255,255,255);
background:rgba(255, 255, 255, .9);
width:800px;
left:10px;
}

In short the #wrap:before just gives the color and goes down to where you want it to. Your sidebar did still will hold the content. You can see it live by clicking my sig.

7

EricWatson, where could I see it live?

8

The main div is a faux column. ie it’s a absolute positioned fake. I did this so it at least stays the height of the sidebar. See it here http://www.websitecodetutorials.com/. Using firebug you can examine the further details.

9

Thanks Eric, I can’t seem to see which on it is.

I have been looking at your sticky footer - http://www.websitecodetutorials.com/code/css/css3-sticky-footer-demo2.php

Looks really nice and simple, I take it that works on all browsers.

10

Yep, the one extra thing you need (which appears in the longer code example after the initial instructions) is

header {border-top:40px solid #fff;} /* soak up negative margin and allows header to start at top of page*/