2006-10-29

被母DIV無視的Float DIV子

其實這個問題遇到過好幾次了,這次又遇到就特別給他研究一番,「當一個母div裡面包著的子div是float的話,母div的空間不會包含子div」,聽起來很饒舌,看一下下面的說明就知道。

我想要作成下面這個樣子,在不固定外面那個紅框 div(content-wrapper)的高度下,我希望他的高度會依照裡面那兩個子div變動,圖A
20061029_1.png

HTML:

<div id="content-wrapper">
  <div id="main">Main Content </div>
  <div id="menu">
   menu
  </div>
</div>

CSS:

#content-wrapper {
 border: 1px solid #FF0000; /*加邊框只是方便觀察*/
}
#main {
 float: right;
 width: 68%;
}
#menu {
 float: left;
 width: 30%;
}

可是實際呈現出來不會是這樣,會變成

圖B.
20061029_2.png


在dreamewaver下看起來也是這樣,如果把#content-wrapper 加入position: relative;的屬性,在dreamweaver所見即所得的畫面看起來就會變正常(圖A),但是在IE或是FireFox看起來還是像圖B一樣。

其實我沒有仔細去查這個是一個bug還是原本的標準就是這樣設定,下面是一些我實驗過的方法來讓他變成我想要的樣子,我只有實驗FireFox跟IE,因為平常我也只有在用這兩個,其他的我就不知道啦。

方法1. (IE only)

對IE而言真的很奇怪,只要有指定外面那個content-wrapper 的寬或是高,他就會變成圖A那樣,沒什麼道理,這給我一種很bug的感覺(這是什麼感覺啊 = =)。

例如

    #content-wrapper {
     border: 1px solid #FF0000; /*加邊框只是方便觀察*/
     width: 100%;
    }
  

真的很奇怪吧,但是這對FireFox無用,看起來還是一樣。

方法2. (FireFox & IE[註])

這個方法感覺起來就比較有道理(ˋˊ還不是亂試出來的),重點就是使用CSS的display,把外面那個#content-wrapper 的display設定成table,裡面有子div的display也設定成table,這樣就可以變成圖A了,這個設定就是讓div以表格的格式呈現,[註]其實IE並不支援display:table,連IE7好像也沒...,但是因為要修正table特性會改變div的寬度加了width: 100%;才讓IE也會通!!。直接看下面的CSS


#content-wrapper {
 border: 1px solid #FF0000; /*加邊框只是方便觀察*/
 display: table;
 /*div套用display:table屬性會有一個預設的margin 所以要照自己想要樣子修正*/
 margin:0; 
/*div套用display:table屬性會像表格那個 沒設定大小就是裡面內容的大小 
故以此修正 也因為這個修正讓IE也通用*/ 
 width: 100%; 

}
#main {
 float: right;
 display: table;
 margin:0;
 width: 68%;
}
#menu {
 float: left;
 display: table;
 margin:0;
 width: 30%;
}

方法3. (FireFox & IE)

雖然母DIV(content-wrapper) 看不到他裡面float的DIV,但是他還看得到沒有float的DIV,我們可以利用這個特性來製作一個支架,把母DIV給撐開來,不過這個方法需要更動到HTML,好處是不用去變更原本DIV的CSS。 (<div class="clear"> </div>也可以寫成<div style="clear: both;"> </div>就不用寫CSS,但我喜歡分開)

HTML:

<div id="content-wrapper">
  <div id="main">Main Content </div>
  <div id="menu">
   menu
  </div>
  <div class="clear"> </div>
</div>

CSS:

#content-wrapper {
 border: 1px solid #FF0000; /*加邊框只是方便觀察*/
}
#main {
 float: right;
 width: 68%;
}
#menu {
 float: left;
 width: 30%;
}
.clear {
 clear: both; 
}


2 則留言:

Hana 提到...

觀察區塊大小,之前我也會用border,不過後來發現border會影響寬度,所以為了更精密計算寬度,後來都改用background來觀察區塊了!

提到...

你說的沒錯,不過自從使用firebug之後就很少用這種改CSS方法了