html - でウェブページを作成できますかではなく、まだいくつかの地域でページを分割しますか？ヘッダー（上部）と左揃えのメニュー（ヘッダーの下）、およびそのメニューの右側にコンテンツが必要なWebページを作成しています。 私が直面している問題は、ページの構造を作成するのではなく、（要素とフロートを使用して）使用したいということです。ただし、ブラウザーウィンドウのサイズを変更すると、コンテンツ要素がメニューの下にフロートします。コンテンツを左側のフローティン

Question

ヘッダー（上部）と左揃えのメニュー（ヘッダーの下）、およびそのメニューの右側にコンテンツが必要なWebページを作成しています。

私が直面している問題は、ページの構造を作成するのではなく、（要素とフロートを使用して）使用したいということです。ただし、ブラウザーウィンドウのサイズを変更すると、コンテンツ要素がメニューの下にフロートします。コンテンツを左側のフローティングメニューの右側に固定したい。

誰かが私がこれを修正する方法について何かアイデアを持っていますか？

私のhtmlコードはこの構造を持っています：

 <div id="menu">
    <a href="#">menu #1</a>
    ...
    ...
    ...
 </div>
 <div id="subcontent">
    text or whatnot...
 </div>

Cssファイルは次のようになります。

 #menu
 {
    width: 200px;
    float: left;
 }

 #subcontent
 { 
      width: 800px;
      float: left;   
 }

PSピクセルを％に変更しようとしましたが、うまくいきませんでした。

Answer 1

CSS

#layout {
    min-width: 1001px;
}

#menu {
    width: 200px;
    float: left;
}

#subcontent {
    width: 800px;
    float: left;
}

.clear-both {
    clear: both;
    font: 1px/1px monospace;
    display: block;
}

HTML

<div id="layout">
  <div id="menu"> <a href="#">menu #1</a> ...
    ...
    ... </div>
  <div id="subcontent"> text or whatnot... </div>
  <div class="clear-both"></div>
</div>

別の解決策：

CSS

#layout {
    display: table;
    width: 1000px; /* set it to 100% if #subcontent width is dynamic */
}

#menu {
    width: 200px;
    display: table-cell;
}

#subcontent {
    width: 800px; /* you can remove the width to make it dynamic */
    display: table-cell;
}

HTML

<div id="layout">
  <div id="menu"> <a href="#">menu #1</a> ...
    ...
    ... </div>
  <div id="subcontent"> text or whatnot... </div>
</div>

Answer 2

外側のコンテナが必要になります。

幅1000pxのdivで両方の要素をラップしてみてください

<div class="outer">
    <div id="menu">
        <a href="#">menu #1</a>   
    </div>
    <div id="subcontent">    
    </div>
</div>


.outer{width: 1000px;}
#menu
{
    width: 200px;
    float: left;
}

#subcontent
{ 
    vertical-align: top;
    width: 800px;
    float: left;   
}