SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid full height column, sticky footer.

    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


    Code:
            <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    #main {
      display: table;
    }  
    
    #rightCol{
      display: table-cell;
      background:#eee;
      width:200px;
      height:100px;
      float:left;
    }
    
    #leftCol{
      display: table-cell;
      margin-left:210px;
      height:auto;
      height:100%;
    }

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RachelR View Post
    ralph.m, I tried your idea but it just makes both columns the height of the text in the right column
    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:

    http://www.sitepoint.com/forums/show...66#post1239966

    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.

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph.m, I followed the example - now I've lost the header completely

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

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EricWatson, where could I see it live?

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RachelR View Post
    EricWatson, where could I see it live?
    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. #9
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric, I can't seem to see which on it is.

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

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

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RachelR View Post
    ralph.m, I followed the example - now I've lost the header completely
    Yep, the one extra thing you need (which appears in the longer code example after the initial instructions) is

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •