現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ(BRタグ)が付加されます。
テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。
見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。
ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし(<BR>タグで指定)」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです(楽天ブログではこれができません)。
幅いっぱいとは、ボックスの幅がブラウザの表示上最大になることを言います。通常のボックスではデフォルトで幅が100%なので特に指定する必要はありません。枠の線の幅は、3pxで指定していますが。お好みで変えてください。solidは、通常の線ですが、doubleやdotted、dashedなどの指定もあります。試してみてください。
これだと枠と文字がくっついて見栄えがよくありません。枠と文字の間をすこし開けてみましょう。
ボックスを右によせて、メインの文章は回り込みさせます。floatを使ってボックスを設定する場合、デフォルトの幅は0%になります。すなわち、中身の分の大きさが確保されることになります。そのため、ちゃんとレイアウトする場合には、幅を明確に指定しなくてはなりません。幅の設定は、「%」で全体の幅の相対で指定する方法と「px」や「em」などで明確に数値で設定する方法があります。floatで回り込みを使う場合には、「px」や「em」で指定するほうがレイアウトしやすいです。
サンプルだとよくわからないのですが、メインの文字とボックスの間の隙間がなく、場合によってはぴったりくっついてみづらくなります。そのため、ボックスの左側に隙間を空けるように指定します。下のサンプルを見ていただくとお解りかもしれませんが、ボックスのサイズが小さくなります。これはfloatのサイズが150pxで設定してる中に隙間を10px空けているため10px小さくなっています。
背景色を付けた枠付きボックスです。サンプルでの色の指定は、色の名前で設定していますが、RGB形式(#ffffff形式)で設定することもできます(RGB形式のほうが希望通りの色が出る)。
HTMLのサンプルを見ていただくとわかりますが、background-colorを設定しているだけです。次のサンプルは、先ほどの右寄せボックスで左に隙間ありのサンプルに背景色をつけてみます。
次のサンプルはおまけですが、枠なしボックスで背景色のみを設定するものです。見た目にシンプルにレイアウトするときには有効な方法だと思います。