javascript - How do I achieve this layout without using Javascript?

Question

I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:

<-------Content-------><--250px sidebar-->
<---------------100% width--------------->

Is this possible without Javascript or tables?

Answer 1

<div style="float: left">
  ..... content ......
<div>
<div style="float: right; width: 250px;">
 ..... sidebar .....
</div>
<div class="clear"></div>
... other content

これは、class="clear"のCSSです。

div.clear {
    clear:both;
}

スペースがどれだけあるかを確認したら、最初のdiv幅を設定できます。

これは役に立ちましたか？

Answer 2

はい、もちろん：

http://jsfiddle.net/whTwg/4/を参照してください

HTML：

<div id="wrapper">
    <div id="sidebar-wrapper">
        <div id="sidebar">Sidebar</div>
    </div>
    <div id="main-wrapper">
        <div id="main">Main</div>
    </div>
</div>

CSS：

#wrapper{
    overflow:hidden;
}
#main-wrapper{
    overflow:hidden;
}
#sidebar-wrapper{
    float:right;
    width:250px;
    max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
    background:#aaf;
    border:10px solid blue;
}
#sidebar{
    background:#faa;
    border:10px solid red;
}

注：（#wrapper{overflow:hidden}または表示とは異なる）代わりに、の<div style="clear:both"></div>後に追加できますmain-wrapper。

編集：

あなたは正しいです、私は追加するのを忘れました#main-wrapper{overflow:hidden;}。リンクとコードを修正しました。