skypeのような段組み構成

質問

skypeのような段組み構成

Dreamweaver cs3を使用しています。

いまだcssをあまり理解していませんので、ほかのサイトのCSS段組みなどを
参考に勉強しています。

そこでお聞きしたいのですが、下記のSKYPEのような段組みがされたサイトを
構築したいと思っています。
参考となるようなページがないものか
検索しました。３カラムなどについてはかなりあるのですが、
しかしskypeのような段組み構成を紹介するサイトが見つかりませんでした。

http://www.skype.com/intl/ja/home

ヘッタ―、またはその上のcssやフッターなどが横幅いっぱいに伸びるようなサイトの作り方、
またはそのような作りを紹介しているサイトがあればお教えください。

回答No.1

noname#119957 · ベストアンサー

■横一杯の長さ指定は、width:100％; とか、背景画像の繰り返しを利用します。

■3カラムは、ヘッダーとフッターのように左右に何もないところは、 clear:both;で回り込み配置を排除します。

■左側に配置するものは float-left 右側ならfloat-right;

これで段組ができます。もちろん全部１つのラッパーに収めます。
ラッパーを中央配置にすれは、skypeのサイトのようになります。

お礼

早速、ありがとうございます。まだ理解力不足ですが、いろいろ試してみました。

自身の
ＨＴＭＬの構成しては、簡単にはwrapper,header,content,sub,main,footerとなっていますが、
これら全部をwrapper（ラッパー）で囲むわけですよね。？
ちなみにwrapper（ラッパー）のmargin: 0px auto;でいいのでしょうか。？

このようにするとどうしてもfooter（width: 100%;　clear: both;）が画面いっぱいにならないのです。

なにがいけないのでしょうか？

回答No.2

noname#119957

100%つかえませんか？ちょっと説明不足ですね。

wrapperがピクセルなら幅一定ですので、
中身もピクセルしていでいいですね。

横幅を％指定すると、流し込みレイアウトができます。
流し込みとは、ブラウザの横幅で中身の幅も連動するやりかたです。
この場合、％とピクセルは一箇所の横レイアウトで混同できません。
ＡＢＣの横レイアウトで33％34％33％で100％とするとブラウザの幅に関係なく
常に1/3配分となります。

今回のご質問には余り関係なかったです。

お礼

ありがとうございました。参考にさせていただきます