Hi all,
Sorry if this is, as I expect it is, a common question.
On fun my site im trying to get 2 divs to go to 100% height and I cant figure out why they are not and its driving me mad!
an example http://www.journography.net/photo.cfm?id=42
the div (.contentRight) stretches beyond where the left border seems to stop! I am using left border as part of the design.
Any help/advice is massively appreciated.
Thanks
Mike
The reason for this is because you gave .contentRight height:100% instead of min-height:100%; ( you also left a stray height declaration in there… tho this has no effect, and you have several stray tags in your markup. You should also do the same for .contentLeft. If you don’t,the content of these div will overflow the container ( which is what is happening).
This wont achieve the effect you want tho as it’ seems you have the concept of 100% height wrong and are applying it toward the wrong end as well.
#1) 100% height only applies to elements that are children of HTML/BODY OR elements with parents with declared height.
This means that even if you daisy chain the height… 100% is still going to be 100% of th window ( or html) element.
this is why after you apply my suggested fix you will see .contentLeft will be too short. It CANNOT stretch to match .contentRight as it’s height is determined by: ( min->100% of ITS PARENT [so essentially window height) OR it’s content (assuming you implemented my fix) whichever is bigger.
Also because you have head/foot content … you windo will always have a scroller, even if there is little or no content in the .leftContenet/ .rightContent divs. as each of these will by default be 100% of the height of the window , even when empty. ( this is why chaining the 100% height down so many levels is a bad idea)
W/o going into code, to achieve what you want you will need THREE techniques.
#1) make a min-100% container which includes your head/ content
#2) a sticky footer
#3) create faux columns… either with generated content or a bg graphic.
Alternatively, you could just forgo some cross browser support and wrap the content divs, then give them display:table-cell and tweak some nuances. In either case you need to reconsider what you are trying to do and how it fits into your SEMANTIC structure first.