Getting DIVs to sit flush together

[justin1754]

I have a show/hide div on this page, and I'm trying to get the thin red div at the bottom of the bigger div to HUG the bottom (e.g. not have any gray between the bottom of it and the bottom of the larger div). Here are the applicable styles

.bottomOfLayer {
	font-size:12px; 
	color:#FFF; 
	background:#7F0000; 
	font-weight:bold; 
	margin:0px; 
	border:0px; 
	border-bottom:1px solid #300; 
	border-top:1px solid #300; 
	text-align:left;
}

.helpContents {
	padding-left: .25em;
	padding-right:.25em; 
	padding-bottom:.5em; 		
}

div {
	padding-top: 1px;
	margin-bottom: 0px;	
	border-left: 1px solid #300;
	border-right: 1px solid #300;
	border-bottom: 1px solid #300;	
	background-color: #E6E6E6;
}

And here's the HTML in contention

<h1>Citing a Normal Book in MLA Format<a href='#' onclick="WM_toggle('cathide');switchimage('theimage');">
		<img name='theimage' src='images/plus.gif' hspace='0' vspace='0' border='0' STYLE="vertical-align: bottom"></a></h1><div style="display:none; "  id="cathide" > <p><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td class="helpContents">Calvin Students: For more help on citing your item in this format, contact a
<a
href="http://www.calvin.edu/library/researchhelp/azindex/refdesk.stm">Reference
Librarian</a></td></tr><tr><td><div class="bottomOfLayer">Lock Layer</div></td></tr></table></div>

[Paul Jr]

It's the CELLSPACING you've applied to the table within which the DIV resides that is keeping the DIV from sitting flush against the bottom of the “box”.

[justin1754]

Really? But cellspacing=0, wouldn't that mean it would ADD any space?

What should I set it to, if anything?

[justin1754]

Solved it myself. The table was fine, it was the P

p {
	margin-bottom:0;
}

That fixed it

[Paul Jr]

Originally posted by justin1754
Solved it myself. The table was fine, it was the P

p {
	margin-bottom:0;
}

That fixed it

Argh, I didn't even see that little P stuck in there!
Glad you got it fixed.