Hi all, I’m new to sitepoint and this is my first post. I did a search and didn’t found an answer to what I was looking for. I’m doing a website http://www.rainbowretreatnimbin.com and I want to make the page height fluid. I’ve tried so many things and nothing works atm. It has some js scrollers which is no problem to remove, but I can’t make the page fluid. I’m a backpacker working for accommodatin in Nimbin, Australia and this is the last thing I need to change…
I appreciate any help.
Best regards,
Pablo
ps: sorry if the title or the description is not to clear, english is not my mother language…
I’m afraid It’s not possible to give you an easy fix because of the way the page has been created. You have used too much absolute positioning which means you are caught in the rigid structure that absolute positioning puts you. To have a fluid height website you really don’t have to do anything as one element follows the next naturally but once you start absolutely placing elements you remove them from the flow and you are stuck into rigid positions and rigid heights.
You should instead have floated the left and right columns and that would allow them to grow and content that follows underneath could just be cleared. The equal height column effect could have been created with a repeating gif on the main parent using the “faux column” approach or display:table and display:table-cell for newer browsers.
In most cases you can’t use height:100% either (apart from on html and body) because that will limit the element to 100% height and no more so it can never grow, with content however 100% height only applies if the parent has a set height (pixel or percentage) that is not defined by its content (see css faq oon 100% height).
For most sites you would not set a height on elements that hold fluid content anyway and just let the layout grow and shrink as required.
I’m a bit stuck for time today otherwise I would try a quick re-write to give you the basic structure but it would really be best if you could work your way through it yourself. If I get a chance tomorrow I’ll try and give some specific pointers.
If you get stuck post again and I’ll take another look and see if anything can be done. (Sorry it’s been a busy week which is why I didn’t get a chance to look deeper into it.)
and this is the last thing I need to change…