3列のテーブル行内に配置されているかのように表示されるように3つのdivを配置する

Question

以前は<table>を使用してページレイアウトを3つの部分に分割していました（左側のサイドバー、右側のサイドバー&メインセンターパネル）。今度は、<table>を過度に使用することの不利な点を学んだ後、この目的のためにテーブルを使用しないようにしたいと思います。のように、<table>の3列のように表示されます。

どのように私が同じ行に3 divを達成することができるかの入力は、高く評価されます。

現在のところ、私のすべての3つのdivは、次々と線形化されて表示されています。

Answer 1

たぶん何か簡単に、何について：

HTML：

<div id="main"> 
    <div>content</div> 
    <div>content</div> 
    <div>content</div> 
</div> 

CSS：

#main{ 
    margin: 0 auto 0 auto; 
    width: 960px; /*just an example*/ 
} 
#main div{ 
    float: left; 
    width: 320px; /* a third of the main width*/ 
} 

私は、これはあなたを助けることを願っています。

Answer 2

「float：left」プロパティとそれに対応する幅を与えて、目的のサイズにします。

例（私はこれらが唯一のデモの目的のために使用され、インラインスタイル、知っている）：このような

<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div> 
<div id="content" style="width:50%;float:left"><!--Content--></div> 
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div> 

Answer 3

何かあなたが始める必要があります。

<div> 
    <div class="column">column one</div> 
    <div class="column">column two</div> 
    <div class="column">column three</div> 
    <div class="last"></div> 
</div> 


.column { float: left; padding: 5px } 
.last { clear: left} 

Hereを

Answer 4

実際の例であります

<div class="col1"></div> 
<div class="col2"></div> 
<div class="col3"></div> 
<div class="clear"></div> 

CSS：

.col1 { 
    float:left; 
    width:250px; 
} 

.col2 { 
    float:left; 
    width:600px; 
} 

.col3 { 
    float:left; 
    width:20px; 
} 

.clear { 
    clear:both; 
} 

Answer 5

通常、サイドバーの幅は固定され、残りの領域はミドルコンテンツ領域になります。それを考えると、ここでの最善のアプローチです：

<style> 
#left { 
    width:200px; 
    float:left; 
} #right { 
    width:200px; 
    float:right; 
} #main { 
    margin:0px 200px; 
} 
</style> 

<div id="container"> 
    <div id="left">content</div> 
    <div id="right">content</div> 
    <div id="main">content</div> 
</div> 

は、ウィンドウのサイズを変更し、すべてが順調です。

ワーキングJSFIDDLE：http://jsfiddle.net/7ayqe/