Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member rwharram16's Avatar
    Join Date
    Feb 2012
    Location
    London, United Kingdom
    Posts
    2
    Member #
    30927
    I have a website which was poorly designed by somebody who has now disappeared and I want to add more content, which I've learnt how to do. However, on one page the new content is now overlapping the footer, see http://grassroutesholidays.com/themed.aspx

    I'm wondering what needs changing to make the space between the header and footer flexible to the content?

    Any tips or fixes would be welcome.

    Richard

  2.  

  3. #2
    Eis
    Eis is offline
    Junior Member Eis's Avatar
    Join Date
    Feb 2012
    Posts
    12
    Member #
    30892
    Liked
    2 times
    Edit the CSS like this for #content:

    Code:
    #content { float: left; color: #333; padding: 10px  5px 0px 5px; margin: 0px 6px 5px 0px; height: 850px; width: 484px; display: inline; overflow: hidden; }
    The only thing I changed was adding the overflow: hidden part. That will make anything that goes past the height of 850px hidden. If you wanted more content there, you could change it to overflow: auto if you want a vertical scrollbar instead (although this wouldn't exactly be aesthetically pleasing, in my opinion)

    Also: I did notice there are many closing p tags that aren't opened. I have no idea why they're there.

    Hopefully this made sense. ^_^
    rwharram16 likes this.

  4. #3
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Hampshire, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Extremely easy fix here. either add in the html <div style="clear:both"></div> or add the class .clear{clear:both;}

    then in the html put it between <img class="" width="484" height="5" alt="Grassroutes" src="img/iback2.jpg"> and
    </div>


    Clears will help span the content around the div making it auto expand once you add more content etc.
    -m3
    rwharram16 likes this.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  5. #4
    Junior Member rwharram16's Avatar
    Join Date
    Feb 2012
    Location
    London, United Kingdom
    Posts
    2
    Member #
    30927
    Quote Originally Posted by Eis, post: 230995
    Edit the CSS like this for #content:

    Code:
    #content { float: left; color: #333; padding: 10px  5px 0px 5px; margin: 0px 6px 5px 0px; height: 850px; width: 484px; display: inline; overflow: hidden; }
    The only thing I changed was adding the overflow: hidden part. That will make anything that goes past the height of 850px hidden. If you wanted more content there, you could change it to overflow: auto if you want a vertical scrollbar instead (although this wouldn't exactly be aesthetically pleasing, in my opinion)

    Also: I did notice there are many closing p tags that aren't opened. I have no idea why they're there.

    Hopefully this made sense. ^_^
    Thank you for this Eis, this was such an easy fix once I worked out where the CSS file was

  6. #5
    Eis
    Eis is offline
    Junior Member Eis's Avatar
    Join Date
    Feb 2012
    Posts
    12
    Member #
    30892
    Liked
    2 times
    Quote Originally Posted by rwharram16, post: 232799
    Thank you for this Eis, this was such an easy fix once I worked out where the CSS file was
    You're welcome! And thanks for liking my post.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:22 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com