使用CSS

Question

配售的DIV說我有以下的DIV：

<div id="top">Page header</div> 
<div id="main">Main content</div> 
<div id="sidebar">Sidebar content</div> 
<div id="bottom">Page footer</div> 

如何使用CSS側邊欄DIV放置到主分區的權利，並將其設置爲，比方說20％的，該總寬度？

我還想在四個DIV之間留一些邊距，這樣佈局看起來不會太狹窄。

想它的「全能」的瀏覽器，包括IE6混蛋工作...

Answer 1

我會回答我的問題並鏈接到這篇文章而這正是我一直在尋找：

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Answer 2

把主工具條在包裝，可以設置包裝的尺寸/位置，並保持你的佈局。

#top { 
    /* top stuff */ 
} 
#wrapper { 
    width: 800px; 
    margin: 0px auto; /* centers on page */ 
} 
#main { 
    float: left; 
    width: 80%; 
    margin-right: 10px; 
} 
#sidebar { 
    float: left; /* by floating left here you have a greater control over the margin */ 
    width: 20%; 
} 
#bottom { 
    /* bottom stuff */ 
} 

Answer 3

使用float S，負margin S和padding。

您可以http://alistapart.com有關頁面布點找到很好的教程（我真的建議聖盃），也涉及大量的跨瀏覽器的問題

http://www.alistapart.com/articles/holygrail

Answer 4

嘗試：

html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */ 
#main { float: left; width: 80%; } 
#sidebar { float: right; width: 20%; } 
#bottom { clear: both; } 

這種事情對於使用reset CSS（還有其他人）是很重要的，因爲不同的瀏覽器對於事物li具有不同的默認值邊界，邊距和填充。

Answer 5

<div id="top">Page header</div> 
<div id="main"> 
    <div id="content">Main content</div> 
    <div id="sidebar">Sidebar content</div> 
</div> 
<div id="bottom">Page footer</div> 


#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; } 
#sidebar { float: right; width: 20%; } 
#content { float: right; } 

Answer 6

這是非常非常重要的，你設置的文檔類型嚴格，ALA正是如此：

如果你這樣做，你不會需要清除你的CSS（少數除外）和可以簡單地使用正確的盒子模型。