今日はこのデザイン!

 

<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(初期値)
フロート(浮動化)しない

 

要素が回り込んで横並びに出来るらしい…

http://taneppa.net/float/