SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer not in the right place, used a margin-top hack but not right

    Hi all I have been playing around with this footer (id=bottom) but although I did a horrible hack adding margin-top:600px it is obviously not a good solution, I have done several different things but to no avail and I don;t know the best solution: http://tinyurl.com/84ovgvu Thanks

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,151
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    Replacing the margin-top with clear:both seems to do it, unless I've misunderstood the problem.

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Positioning elements with margins where content is of variable height is not a sound approach.

    Technobear is right that clear:both; is appropriate but this alone will not allow you to add a top margin to #bottom.

    #bottom is, in effect, a footer and unrelated to the main content of the page. Wrap everything inside #main, from the h2 down to but not including #bottom, in a new div, perhaps with the id #content.

    Then give #content overflow:hidden, to that it wraps around the floated elements it contains.

    Then give #bottom clear:both and whatever top margin you wish.

    Code CSS:
    #content {
        overflow:hidden;
    }
     
    #bottom {
        clear:both;
        margin-top: 30px; /* or whatever you like */
    }

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Technobear that works great. Thanks Victorinox I'll do that solution when I have a moment.


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
  •