Html 我可以用<；创建网页吗；部门>；而不是<；表>；仍然在几个区域分割页面？

我正在制作一个网页，需要一个标题（在顶部）和一个左对齐的菜单（在标题下方）以及菜单右侧的内容

我面临的问题是，我想使用（与元素和浮动）而不是创建页面的结构。然而，每当我调整浏览器窗口的大小时，内容元素就会在菜单下向下浮动。我希望内容保持在左侧浮动菜单的右侧

有人知道我该怎么解决这个问题吗

我的html代码具有以下结构：

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

---

PS我尝试将像素更改为%，但没有成功。

您将需要一个外部容器

只需尝试将这两个元素包装在宽度为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;   
}

.外部{宽度：1000px；}
#菜单
{
宽度：200px；
浮动：左；
}
#分包
{ 
垂直对齐：顶部；
宽度：800px；
浮动：左；
}

您需要一个外部容器

只需尝试将这两个元素包装在宽度为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;   
}

.外部{宽度：1000px；}
#菜单
{
宽度：200px；
浮动：左；
}
#分包
{ 
垂直对齐：顶部；
宽度：800px；
浮动：左；
}

CSS

HTML

HTML

...
...
... 
发短信什么的。。。

CSS

HTML

HTML

...
...
... 
发短信什么的。。。

.outer{width:1001px；}

必须将1px添加到父容器中，否则某些浏览器将在第一个容器下显示第二个浮动DIV。

.outer{width:1001px；}

必须将1px添加到父容器中，否则某些浏览器将在第一个容器下显示第二个浮动DIV。

#layout {
    min-width: 1001px;
}

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

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

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

<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>

#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;
}

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