私が取り組んでいるこのレイアウトがあり、投稿部分 (ブログのようなもの) では、次のように表示したいと考えています (画像/スタイルの微妙な違いは無視してください。これは PSD から取得したものです)。
そこで、記事の説明を右側に配置したいので、ニュース記事のアイキャッチ画像を左にフロートするように設定して、コーディングを試みました。img は標準として 300px に設定されており、高さはアイキャッチ画像が何であるかに応じて変化することを意味します。タグ部分には、独自の div があります。
そこで、そのようにコーディングしてみましたが、何らかの理由で、注目の画像がコンテナー div からにじみ出て、タグ div と重なっています (実際のページはこちらを参照してください)。タグ div がその下にどのように配置されているかを確認してください。それが私の問題です。タグ div には、主役の画像の下に独自の行が必要です。画像がdivからにじみ出ている理由がわかりません。
(私が問題を抱えている唯一の部分なので、関連する領域を投稿します):
<div id="newsmain">
<div id="titlearea">
<div class="comment_bubble">
<a href="">9</a>
</div>
<span class="post_titles"><a href="">Colored Prototypes of Alter's Tales of Vesperia Estelle Figure - Pre-orders Now Open!</a></span><br />
<span class="under_titles">POSTED BY <a href="">A745</a> | APRIL 27, 2013 | 8:00pm GMT | FILED UNDER: <a href="">TALES NEWS</a></span>
</div>
<!-- NEWS BODY -->
<div class="newsbody">
<a href=""><img class="featured_image" src="http://gallery.abyssalchronicles.com/albums/userpics/10002/estelle_10.jpg" alt="" /></a>
Alter has released pictures of the colored prototype of their upcoming <em>Tales of Vesperia 1/8 Scale Estelle figure</em>. Some shops also have pre-orders open. In addition, the <em>Milla Maxwell plushie</em>, also by Alter, has some pre-orders open as well.
<br /><br /><br />
<a href="">READ THE REST »</a>
</div>
<div class="tagsline">
TAGS: <a href="">TALES OF VESPERIA</a>, <a href="">TALES OF XILLIA</a>, <a href="">ESTELLE</a>, <a href="">MILLA MAXWELL</a>, <a href="">MERCHANDISE</a>, <a href="">PS3</a>, <a href="">XBOB360</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>,
</div>
</div>
そしてそのためのCSS：
#newsheader {
width: 628px;
background: #3396cf;
font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
color: #ffffff;
font-size: 18px;
padding: 5px;
margin-bottom: 10px;
}
#titlearea {
width: 628px;
border-left: 9px solid #da5099;
border-bottom: 1px solid #c5a7bc;
padding: 2px 0 1px 4px;
}
.comment_bubble {
width: 50px;
height: 35px;
padding-top: 3px;
text-align: center;
color: #ffffff;
font-family: Georgia, Arial, Tahoma, Verdana, sans-serif;
font-size: 15px;
font-weight: bold;
background: url('images/commentbubble.png') no-repeat left top;
float: right;
}
.comment_bubble a {
color: #ffffff;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.post_titles {
color: #6c053c;
font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 17px;
padding: 0;
}
.post_titles a {
color: #6c053c;
text-decoration: none;
}
.post_titles a:hover {
color: #ba0767;
}
.tagsline {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 11px;
color: #636262;
padding: 5px 5px 3px 13px;
border-bottom: 1px solid #c5a7bc;
text-transform: uppercase;
}
.tagsline a {
color: #868889;
text-decoration: none;
width: 100%;
}
.tagsline a:hover {
color: #000000;
}
.under_titles {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 11px;
color: #636262;
padding: 0;
text-transform: uppercase;
}
.under_titles a {
color: #868889;
text-decoration: none;
}
.under_titles a:hover {
color: #000000;
}
.newsbody {
padding: 9px 8px 15px 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.featured_image {
border: 0px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
height: auto;
float: left;
text-align: left;
}
みんなありがとう。