簡単に作るのにＣＳＳフレームワークというものもあります。
これはデザインや動作に関するスタイルをまとめたクラス群を
定義しているＣＳＳで、ＨＴＭＬから取り込んでやるだけで
利用できます。
グリッドレイアウトシステムが有名です。
アメリカで開発されたものらしいですが、画面をグリッド（マス目）状
に見立てて、何マス目から何マスの大きさって感じで指定できます。
使うと、こんな複雑なデザインが簡単に作れます。
HTMLやったことない人だと何がすごいのか分からないでしょうけど・・
HTMLはこんな感じです。
今回は24カラム(列),マージン0のグリッドです。
<div class='grid_1 prefix_1 suffix_22'>
<p style="outline: 1px solid blue;">1</p>
</div>
クラスとして大きさや横位置を指定しています。
grid～で大きさ、prefixで開始位置、suffixで後ろのスペース
を指定してます。
<div class='prefix_4 grid_4 suffix_4'>
<input type="text" value="4マス" />
</div>
<div class='prefix_4 grid_4 suffix_4'>
<input type="text" value="4マス" />
lt;/div>
とした場合は前４マスあけて、テキストボックス
真ん中は４＋４で８マス空けて、またテキストボックス
後ろを４マス空けるという指定ですね。
ちなみにvariable Grid Systemを利用しました。
ttp://grids.heroku.com/
デザインだけでなく動きを含んだものだと最近は
Twitter Bootstrapが有名です。