html - レイアウトの問題（コンテンツ3枚の写真）

Question

コンテンツ (中間) 部分で p 要素を使用しようとすると、次の結果が得られました。スペースを確保してレイアウトを壊すことに興味はありません。

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;
}

#content_mid (すべてのコンテンツを配置する場所) の要素がレイアウトを壊さないようにするにはどうすればよいですか?

Answer 1

解決策はoverflow:hidden;

Answer 2

段落要素 -

小さなマージンを導入します。それをクリアします - clearfix、すなわち

p {
padding:0; 
margin:0;
}

テストしたことはありませんが、これでレイアウトが修正されるはずです。