今日はこのデザイン!
<div class="topright_stripe cf">
<div class="stripe_left">
<p>□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□<br>
</p>
</div>
<div class="stripe_right">
<img src="/img/□□□□.jpg">
</div>
</div>
--------------
.topright_stripe {
background-image: url(/img/topright_stripe.gif);
background-repeat: no-repeat;
width: 608px;
height: 180px;
margin: 0 auto;
}
.strioe_left {
width: 608px;
float: left;
}
.stripe_left p {
margin: 0;
padding: 20px 15px 0 23px;
color: #735844;
font-size: 13px;
line-height: 20px;
}
.stripe_light {
width: 204px;
float: left;
margin-top: 18px;
}
--------------
floatとは…
left
ボックスを左側に寄せ、右側に後続の内容を回り込まる
right
ボックスを右側に寄せ、左側に後続の内容を回り込まる
none(初期値)
フロート(浮動化)しない
要素が回り込んで横並びに出来るらしい…


