<p> seperating <div>'s?

I have 3 divs, one is a header, one is a footer and one is the content:

|-------------| header
|..................|
|..................| content
|..................|
|..................|
|-------------| footer

If I use a <p> at the bottom of the content div or at the top, it seperates the header or footer (depending whether the <p> is at the top or bottom).

|-------------| header

|..................|
|..................| content
|..................|
|..................|

|-------------| footer

Is there anyway to stop this from happening?

Thanks.

 

You shouldn't be using markup (HTML) like that. What does your code look like?

 

A quick way to solve your problem:

p {
    margin: 0px;
    font-size: 0px;
}

Code (markup):

 

It is due to margin collapse. See Meyer, Uncollapsing Margins.

cheers,

gary

 

<div id="maintxt">
            	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque auctor, sapien eget viverra laoreet, velit purus ultrices risus, a sollicitudin ligula massa ac massa. Sed tempus. Nullam lorem neque, commodo eget, eleifend a, condimentum at, felis. Suspendisse ligula neque, tempus vel, rhoncus vitae, tempor non, leo. Pellentesque dui dolor, congue at, suscipit sed, placerat eu, arcu. Aliquam erat volutpat. Nulla id sapien id odio tempor vulputate. Donec ultricies vestibulum velit. Proin turpis ante, cursus ac, mollis nec, lacinia id, eros. Etiam felis. Aliquam viverra felis ac nulla. Integer pede. Fusce adipiscing purus non libero. Nunc posuere pretium nisl. Aliquam suscipit dignissim tellus. Vivamus aliquet lorem ac lectus. In varius commodo nibh.</p>

HTML:

etc...

Thankyou.

 

Ok. I was under the impression that you were using <p> tags to create extra space. Sorry.

 

That's what I thought as well.

Anyway, you can just take out the font-size: 0px; attribute from my earlier code and the extra space to the top and bottom should go away.