Issue with layout (content 3 pictures)

Question

When I tried to use the p-element on the content (middle) part I got the following result. I am not interested of having the space and breaking the layout.

HTML

<div id="main">
    <div id="content_top">
        <h1>Welcome</h1>
    </div>
    <div id="content_mid">
        <h2>Welcome</h2>
        <p>Text</p>
    </div>
    <div id="content_bot"></div>
</div>

CSS

#content_top {
    width: 560px;
    height: 92px;
    background: url(../images/content_top.png);
    padding: 70px 70px 0px 70px;
}

#content_mid {
    width: 560px;
    padding: 0px 70px 0px 70px;
    background: url(../images/content_mid.png);
}

#content_bot {
    width: 700px;
    height: 344px;
    background: url(../images/content_bot.png);
}
#main {
    width: 700px;
    margin-right: 10px;
    float: left;
}

How do I make sure no element in the #content_mid (where I will place all content) will break the layout?

Answer 1

The solution was overflow:hidden;

Answer 2

paragraph element -

introduces a small margin.Clear it - clearfix,i.e.

p {
padding:0; 
margin:0;
}

Havnt tested it,but this should fix your layout.