純粋なHTML： "float"を使わずにこのレイアウトを作成するには？

Question

私は私のウェブサイトのために、次のレイアウトを作成しようとしています：

<table width="80%" align="center"> 
    <tr> 
     <td width="80%" bgcolor="red">MAIN CONTENT</td> 
     <td bgcolor="green">SIDEBAR</td> 
    </tr>  
</table> 

あなたは、これはページ幅の80％であり、コンテンツエリアは、その幅の80％であるテーブルを作成します想像通り、サイドバーは残りの部分を埋めます。

今回は、DIVまたはSPAN、または基本的にTABLElessデザインを使用したいと思います。今、私は私は2つのdiv要素を使用し、これを達成するために彼らの「フロート」プロパティを使用することができます知っているが、私はこのような、より簡単で、より論理的なものがあるかどうかを確認するために期待していた。残念ながら

<div align="center" style="width:80%"> 
    <span style="width:80%;"> 
     MAIN CONTENT 
    </span> 
    <span> 
     SIDEBAR 
    </span> 
</div> 

上記動作しません。まったく、私は理由を知らない。誰かが "フロート"を使用しない純粋なHTML実装を私に見せてもらえますか？

インターネット上に見られるすべてのサイトには、少なくとも1つのサイドバーがありますので、私の答えは私以外の多くの人に役立つことを願っています。ありがとう！

Answer 1

floatを使用せずに、適切なマークアップとdisplay: table;,display: table-cell;とCSSを使用してこれを行うことができます。

HTML：

<div id="wrap"> 
     <div id="sidebar"> 
     I am a sidebar! 
     </div> 
     <div id="mainContent"> 
     I am some main content 
    </div> 
</div> 

CSS：

#wrap 
{ 
    width: 100%; 
    height: 400px; 
    display: table; 
} 

#sidebar 
{ 
    display: table-cell; 
    border: 1px dashed #f00; 
} 

#mainContent 
{ 
    display: table-cell; 
    width: 80%; 
    border: 1px dashed #0f0; 
} 

しかし、注意してください、IE7および下、このCSSをサポートしていません。

HTML

<div id="wrap"> 
     <div id="sidebar"> 
     I am a sidebar! 
     </div> 
     <div id="mainContent"> 
     I am some main content 
    </div> 
    <div class="clear">&nbsp;</div> 
</div> 

CSS：

をあなたはまた、所望のレイアウトを作成するためにフロートを使用することができ、ほぼ同じマークアップ（1つの余分のdiv）を使用して

http://jsfiddle.net/57Fvk/

---

#wrap 
{ 
    width: 100%; 
    height: 400px; 
} 

#sidebar 
{ 
    width: 20%; 
    float: left; 
    background: #f00; 
    height: 100%; 
} 

#mainContent 
{ 
    width: 80%; 
    float: left; 
    background: #0f0; 
    height: 100%; 
} 

.clear 
{ 
    clear: both; 
} 

http://jsfiddle.net/shzLc/

Answer 2

は、ここでは、このレイアウトを作成するための非常にシンプルな方法です：

http://jsfiddle.net/e94zc/

HTML：

<div id="page"> 
    <div id="content"> 
     Content 
    </div> 
    <div id="sidebar"> 
     Sidebar 
    </div> 
</div> 

CSS：あなたは `` sのを使用している

#page{ 
    margin: 0 auto; 
    width:80%; 
    position: relative; 
    } 
#content{ 
    width:80%; 
    position: absolute; 
    top: 0; 
} 
#sidebar{ 
    position: absolute; 
    top: 0; 
    left: 80%; 
    width: 20%; 
}