Layout with fixed header and footer, fixed width sidebar and flexible content

Question

I\'m trying set up a layout that will look like this:

I want to use twitter bo

Answer 1

I managed to get the layout you mocked up in your post by first creating a main container class that is stretched 100% both vertically and horizontally, this way we can fully stretch the content within to the full height of your viewport. Within this container div i created another container and positioned it absolutely while stretching it in all directions, top, left, bottom, right, i felt that this method was cleaner cause this way i can easily position the header and footer without the need for negative margins (tried it like that but it didn't work).

Here is a demo of the layout: http://jsfiddle.net/andresilich/gbzTN/1/show, edit here.

And the code:

CSS

html, body {
    height: 100%;
}

.main {
    *zoom:1;
}

.main, .row-fluid {
    height: 100%;
}

.main:before, .main:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.main:after,
.column:after {
    clear: both;
}

.column {
    height: 100%;
    overflow: auto;
    *zoom:1;
}

.column .padding {
    padding: 20px;
}

.box {
    bottom: 40px;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}

.span9.full {
    width: 100%;
}

.footer {
    height: 40px;
    width: 100%;
    z-index: 100;
    background-color: red;
    bottom: 0;
    left:0;
    right:0;
    position: fixed;
}

HTML

  

    

      
        
        
        
      
      Project name
      

        
           Username
          
        
        

          
Profile
          

          
Sign Out
        
      
      

        

          
Home
          
About
          
Contact
        
      

    
  


    

        

            

                

                    .. content ..
                
            
            

                

                    

                        .. content ..
                    
                
            
        
    


    
footer

Edit: noticed that this solution does not work as expected in IE7 (works perfect in IE8 and above) so here is a conditional comment targeting everything below IE8 that should fix the issue and make it work as expected:

CSS