Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gap between content and bottom of page

    For this template, i finally decided not to use tables but instead divs and css. It's basically finished, but there are two quite major problems.

    The first: In IE, the main area appears in the center, just like i want it to do, however in firefox, it appears on the left.

    The second: The main area has a white background, however it won't stretch to the bottom of the page like i want it to.

    Link to page: here

    Link to css: here

    Any help on these two problems appreciated, cheers.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to add margin:auto; to .mainarea. You have a lot of excess CSS fyi. You have things like multiple widths in a css declaration. As for the white background, how can you have a min-height if you explicitly set the height? Think about it. After clearing that up you need to clear your floats. http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2007
    Location
    England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers for that, works perfect. I now just have 1 problem which is the small gap between the main area and the bottom of the page.

    Any ideas?

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Sticking overflow: hidden; on the container div will get rid of anything that should be there as it clears the floats

    I would also consider checking the paragraphs of text on that page as there are quite a few grammatical errors, such as 'threw', which should be 'through'
    Last edited by ahallicks; 05-25-2007 at 04:16 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New to the CF scene
    Join Date
    May 2007
    Location
    England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    Sticking overflow: hidden; on the container div will get rid of anything that should be there as it clears the floats

    I would also consider checking the paragraphs of text on that page as there are quite a few grammatical errors, such as 'threw', which should be 'through'
    That just seems to disable scrolling and not get rid of the gap at the bottom of the page. Also, the gap doesn't appear in IE, just firefox.

    And as for the content, im building this website for someone else, so i'm not bothered about the grammar , although im sure he'll change it once its complete.
    Last edited by Jaanboy; 05-25-2007 at 05:18 PM.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Jaanboy View Post
    That just seems to disable scrolling and not get rid of the gap at the bottom of the page. Also, the gap doesn't appear in IE, just firefox.
    I don't see the issue. Where is the bottom part?


  •  

    Posting Permissions

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