Extra space added in a wrapper div, CSS fix required!

Get Started
1

So I’m not really a CSS guy, but I am having a problem with a centered, fix-width layout. I’m using a wrapper div to center my elements, but there is this space under the footer that I can’t get rid of!

Here is the HTML (probably more than required):


<div id="wrapper">
	<h1>Section Title</h1>
    <p class="instructions">Instructions</p>
	<div id="wordmash">
    	<p><span id="term">TestWordBingle</span></p>
    </div>
    <div id="controls">
    	<input type="button" value="Previous" name="previous" id="previous" class="btn" />
        <input type="button" value="Next" name="next" id="next" class="btn" />
        <div class="clearBoth"></div>
    </div>
    <p class="instructions">Instructions</p>
    <h1>Section Title</h1>
    <p class="instructions">Instructions:</p>
    <div id="2cols">
    	<div id="col1">
        	<h2>col1 title</h2>
            <ul>
            	<li>Col 1 list</li>
            </ul>
        </div>
        <div id="col2">
        	<h2>Col 2 titles</h2>
            <ul>
            	<li>Col 2 List</li>
            </ul>
        </div>
        <div class="clearBoth"></div>
    </div>
    <div id="footer">
    	<p>&copy; 2010 Bengfort.com Some Rights Reserved</p>
    </div>
</div><!-- wrapper ends -->

And the CSS:


body {
	margin: 0; 
	padding: 0; 
	font-family: Verdana, Geneva, sans-serif; 
}

#wrapper {
	width: 800px; 
	margin: auto;
	margin-top: 20px; 
	border: 1px solid #333333;
}

#footer p {
	text-align: center; 
	background-color: #333333;
	color: #ffffff;
	font-family:Georgia, "Times New Roman", Times, serif; 
	font-size:10px;
	padding: 5px;
}

Anyone have any ideas?

2

Add margin-bottom:0 to the rule for #footer p.

It’s the default bottom margin of the paragraph that causes the extra white-space.

3

Ah, beautiful! Thanks! I was messing with the margins and paddings of the wrapper and footer divs, never thought about the paragraph. Thanks again!

4

To which IE are you referring? I checked in IE8 and everything seemed to be working fine. Of course, the CSS reference does mention that IE 5.5+ is “buggy” for the margin property: http://reference.sitepoint.com/css/margin.

Needless to say, the article talks about specifics when it comes to margin- and the main problem seems to be “inherit”. Oh IE…