Cant get boxes to line up correctly

Plane_designs

Hi all,

Im trying to have a background image with curved edges for text areas, consisting of a header, middle section and footer. There are 3 seperate images and I want the header fixed, middle section variable (because the amount of content varies per page) and footer fixed.

When I line it up it displays correctly in my web design program but once uploaded online the header, middle section and footer leave a gap between each other. Please see the images and code below... Id be greatful if anyone can offer some advice how to solve this problem.

Thanks

Code:

HTML:

<div id="contenthead">
    <p>TEST</p>
    </div><div id="subcontent">
      <p>Trying to get the subheader, middle and footer to align correctly</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div><div id="contentfoot"></div>

CSS:

#contenthead {
background: url(images/subheader.png);
background-repeat: no-repeat;
width: 740px;
height: 80px;
background-position:center;
margin-left: auto;
margin-right:auto;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
padding-left: 40px;
}

#subcontent {
background: url(images/submiddle.png);
width: 740px;
background-position:center;
padding-left: 40px;
margin-left: auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#contentfoot {
background: url(images/subfooter.png);
background-repeat: no-repeat;
width: 740px;
height: 95px;
background-position:center;
margin-left: auto;
margin-right:auto;
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
padding-left: 40px;
}

Plane_designs

I cant seem to edit my thread but just discovered by using paragraph tags it causes the large gap. However, even without the tags there is a tiny gap visible.

It also makes it more difficult to format the paragraph without the <p> tags.

Can anyone suggest any work-arounds? Thanks.

Weedpacket

As you've inferred, it's the <p> elements at fault; specifically their margins

I haven't tested the following rules extensively, but in my off-the-cuff check they, worked and may give you some idea of what direction to take:

#subcontent p:first-child { margin-top: 0; }
#subcontent p:last-child { margin-bottom: 0; }