Hello,
Please take a look at this page:
http://test.petpal.co.il/
How do i make the #content_wrap div 100% height aswell?
Easiest would be display:table-cell on that element.
Hey Ryan,
Tried it, as soon as I apply this rule the max-width:1000px rule gets ignored, any ideas?
You have max-width:1000px on everything. Just remove all the max-widths and on #wrap, set the max-width there, and margin:0 auto; to center it horizontally on the page. Saves you code.
No, footer has width set to 100%, and its inside #wrap so I cannot change it.
Just move it outside of #wrap.
tried it aswell, it breaks the 100% height layout completely.
Could you update the live site so I have a fresh copy to work off of? Or make a test page? Getting the sticky footer feature you want is very simple and we are close.
You can see a live example on the url I gave:
http://test.petpal.co.il/
the white area should strech all the way down to the footer
ulthane, how do you expect #content_wrap to stretch from the header to the footer? It’s just an object within a table row. It’s not part of the table structure. It’s height is determined by its content.
Here are some handy links to demonstrate how to do this:
Waiting some magic I guess, if I had a clue on how to do it then perheps I wouldn’t be coming here to ask ^^, but I don’t belive its impossible to achieve either.
Ralph, i’m already aware of these examples, thing is as you can see in these examples all blocks are always set to the same width, its either 100% or some max-width:x;.
in my site, I got everything set to max-width:1000px except for the footer, which I want to stay 100%.
It may be that the OP’s situation is a touch more complicated. OP’s <main> element is already full height. But now one of the children elements inside <main> also needs to expand to the full available height.
The structure needs to change. The footer can appear to be the width of the window, but in reality it can be no wider than the table container, 1000px. The middle table-row needs to contain a table-cell.
If he simply replicated the sticky footer layout (Ralpph linked to one) then this would go a lot smoother.
http://codefundamentals.com/demos/CSS-quiz-21.php
Change the footer height to 100% and it works fine. Bit of an outdated method…can be slightly optimized but using a base sticky footer layout and throwing in content will be your best bet.
Exactly. Or possibly use an older sticky footer method. Then he could have his footer stretch the full width of the window… and it would not need a width assigned to do that. 
Thanks everyone for the answers 
Well i’ll wait for tommorow morning to see if there are no other solutions then i’ll change, the downside with that method is that footer has fixed height, and I didn’t decide yet how i’m going to fill my footer, but if i’ll decide on something that will require it to be fluid, then changing my layout wouldn’t solve anything.
Other than the color, is there a reason why the footer must stretch 100% wide?.. wider than the content?
no, only for the color so far.
I’ll have something for you in a few minutes.