height:50px;
width:750px;
margin:0px;
padding:0px;
background-color:#b3ffb3;
float:left;
margin:0px;
padding:0px;
height:300px;
width:250px;
text-align:left;
background-color:#ffb3b3;
float:left;
margin:0px;
padding:0px;
height:300px;
width:250px;
text-align:left;
background-color:#ffccb3;
float:left;
margin:0px;
padding:0px;
height:300px;
width:250px;
text-align:left;
background-color:#ffe6b3;
もちろんこんなに単純ではありませんが、大抵のblogの構造はこんな感じに大きなブロック要素を並べて作られていると思います。
これを応用すれば色んなレイアウトも可能です。
ちなみにここでは行っていませんが、blogのレイアウトだとソースの一番下のほうに
<div style="clear:both"></div>
とか書いてあるかもしれません。
この style="clear:both" は、そのブロック(ここの場合、これが書かれているdivの範囲)をそれ以前に出てきたfloatの全てより下にするものです。
これは一見無意味なソースに見えますが、レイアウト崩れを防ぐためにあるものなので消しちゃダメですよ。(経験者談)
さて、ここまではdispalyを使っていませんが、そもそもdivはブロック要素ですので display:block をタグ内に書く必要がありませんでした。(もちろん書いても構いません)
つまり、このdisplayを使って効果が大きいのは、インライン要素のものをブロック要素に換えたりする時なんです。
例えば、本来はインライン要素である文章の一部をブロック要素に変えてしまいたい時などです。
例文:文章をブロック化。
↑この『例文:』をブロック化します。ここではspanを用いてインラインスタイルシートで書いていきます。解りやすいよう背景色もつけてみますね。
<span>例文:</span>として、書き込むCSSは style="display:block;background-color:#ffccb3;" です。
例文:文章をブロック化。
『例文:』がブロック化され、後ろの文章が下に並べられました。これは、ブロック要素は何もしなければ横に他の要素が「回り込む」ことがないためです。
横幅を変えてみます。width:80px を追加。
例文:文章をブロック化。
次に float:left を追加すると……。
例文:文章をブロック化。
floatの効果で「回り込み」がなされて普通の文章のように並べられます。
これをどう使うかという例として。
背景色を消して、量産してみましょう。改行して繰り返します。
例文:文章をブロック化。
例文2:文章をブロック化。
例文3:文章をブロック化。
このように、あたかも<table>を使って並べたかのようにすることができます。
もちろん『例文:』はブロック要素の中ですので、text-alignも通用します。
右寄せにしてみると……。
例文:文章をブロック化。まずは色つき。
例文2:文章をブロック化。
例文3:文章をブロック化。
例文:文章をブロック化。色を消すとこうなります。
例文2:文章をブロック化。
例文3:文章をブロック化。
文章レイアウトの整形の手段として、なかなか使えるテクニックですよ。