SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to change a fixed page height to fluid

    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...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Pablo,

    Welcome to Sitepoint

    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.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul for the reply. I think I'll have to figure it out then , I bought this theme on themeforest...

    Thank you

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.)


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •