0

I have been able to design my layout so that it has 2 columns and a width of 100%, you can see that here.

Now I'm trying to implement a sticky footer (100%) height with this layout which also has the background in the right hand column flow down the footer and also with the border I have in the left hand column.

Is there a way to do this with my current layout or it would great if anyone could suggest an alternative to the way I'm currently doing it!

Thanks!

2 Answers2

3

Take a look at Sticky Footer 2009. This has been discussed multiple times on SO as well.

Community
  • 1
  • 1
ChssPly76
  • 99,456
  • 24
  • 206
  • 195
  • ChssPly76, I have got that working however I have no idea on making the columns flow down as well? –  Sep 15 '09 at 01:02
  • Your col2 seems to have fixed width, right? Use a right-aligned background image. – ChssPly76 Sep 15 '09 at 01:04
  • ChssPly76, Yes it does however even after implementing the sticky footer (using your link) my main body does flow all the way down to the footer. See here http://www.prashantraju.com/test/index_fix.html. Any tips on how to get that working? –  Sep 15 '09 at 01:10
  • Meant to say doesn't not does. –  Sep 15 '09 at 01:12
  • Your HTML layout is wrong. `clearfix` needs to be applied to the "main" div right within `wrapper`, and that "main" div should be the only one within. You have both `header` and `colmask`. Background image I've mentioned above should be applied to `wrapper` div as well. – ChssPly76 Sep 15 '09 at 01:32
  • ChssPly76, Think i got it!!! http://www.prashantraju.com/test/index_fix.html Thanks for your help!!!! –  Sep 15 '09 at 01:59
0

I would add a CSS class to the DIV containing the columns and style that. To get close, I had to add the following to your CSS file:

body
{
 height: 100%;
}

.footer
{
 position: absolute;
 top: 90%;
 left: 0;
 height: 10%;
}
David Andres
  • 31,351
  • 7
  • 46
  • 36