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

HTML & CSS
1

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

Replacing the margin-top with clear:both seems to do it, unless I’ve misunderstood the problem. :slight_smile:

3

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.

#content {
    overflow:hidden;
}

#bottom {
    clear:both;
    margin-top: 30px; /* or whatever you like */
}
4

Thanks Technobear that works great. Thanks Victorinox I’ll do that solution when I have a moment.