Content spills out of containing block

HTML & CSS
1

I’m hand coding a responsive website (not using a framework) which was coming along pretty well until I hit this snag. I haven’t written the media queries yet, but at this point all I want is for the containing blocks to clear when I resize the browser which they all do except for one and I just can’t see the problem. You can find the website here: [htmlkoala.com/mccabe-electric]. Here is the relevant code I think (markup first):

Well for some reason it’s only displaying a portion of the markup. I haven’t used a forum for a long time and will have to learn how to post again I guess. Check out the website I guess.

I’ll have to get back to this as I need to learn to use it.

2

You have an unclosed element <div id="contact">. Not sure if that’s the problem, but it looks like your form is overflowing.

3

Thanks Sam! I appreciate your help and your diligence in parsing out my code. You were so right concerning the unclosed element, but it wasn’t the culprit of my problem. I have corrected that error though and also found the real culprit causing the form to spill out of the containing block. It seems like it’s always the obvious with me.

I had set a “sticky footer” early on which requires a fixed height for the footer wrapped in an equal height negative margin div. I didn’t have two footers at that point. I removed this as I don’t think I need it now because I have the html tag set at min-height 100%. The form now stays within its containing block and stacks up below the parent as desired when resizing the browser window.

Here’s the html and the css:

<div class="wrapper">

<div class="push"></div>

</div><!-- .wrapper -->

.wrapper {
    min-height: 100%;
    margin: 0 auto -700px;
}

.footer1, .push {
    height: 700px;
}
4

As an aside and a note for the future never use that sticky footer technique again (especially the one with the silly push div) because they all break in responsive layouts as they rely on fixed height elements, pushers or padding.

Use this method which works from IE8 upwards and needs no pushers or set heights to work.

As the inventor () of the first sticky footer back in 2003 I have a lot of experience with them over the years :smile:

1 Like
5

Nice!

Thanks for your advice and generosity.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.