如何停止右div包裹在左div下方答案

【问题标题】：How to stop the right div wrapping below the left div如何停止右div包裹在左div下方
【发布时间】：2013-09-12 10:12:50
【问题描述】：

我遇到了一个 div 包裹在它并排的左侧 div 下面的问题，我希望 div 变窄，直到它与菜单栏并排，然后停止移动但不换行。

我有两个并排的 div，左边的 div 是菜单栏，右边的 div 是用来在网站上输入内容的 div。左边的div设置为占宽度的16%，右边的设置为占宽度的86%。当我使浏览器窗口变窄时，它调整大小变得越来越窄，直到主页 div 包裹在菜单栏 div 下方。我想停止 div 包裹在下面。

HTML

<html>

<head>
<meta content="en-gb" http-equiv="Content-Language">
<title>rthrhtdrhrth</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style30 {
    font-size: medium;
    text-align: left;
}
.auto-style32 {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}
</style>
</head>

<body>

<!--In this site the design code is the same for each page such as the menubar, and banners however the mainpage content will be
different for each page as it contains that pages individual content. 

<!--The below bannerdiv div, is the div that contains the top banner picture for the sight. 
percentages are used throughout the site to maintain a liquid layout. -->
<div id="bannerdiv" align="left" title="Banner">
    <img alt="z" height="114" src="Untitled3.jpg" width="100%"></div>
<div id="container">
    <h3 id="container" class="auto-style4">ythtytytyytht</h3>
    <!--The container div is used to create top green line. --></div>
<div id="menubar" align="center" style="width: 16%; height: 100px;" title="menu">
    <!-- This is the code for the menubar, to add a new option to the menubar-->
    <!-- Add a new <li> tag below the bottom link, to delete a link, delete the desired
                                                                                    link element. -->
    <ul>
        <li style="">
        <img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126"></li>
        <li><a auto-style5"="" href="index.html" style="height: 20px;  class=">Home</a></li>
        <li><a href="general.html">General</a></li>
        <li><a href="map.html">Site map</a></li>
        <li><a href="rules.html">Rules &amp; Procdures</a></li>
        <li><a href="enviro.html" style="height: 20px">Envirommental</a></li>
        <li><a href="energy.html">Energy</a></li>
        <li><a href="it.html">IT</a></li>
        <li><a href="sap.html">SAP</a></li>
        <li><a href="purchasing.html" style="height: 20px; width: 180px;">Purchasing</a></li>
        <li><a href="quality.html">Quality</a></li>
        <li><a href="safety.html">Safety</a></li>
        <li><a href="hr.html">Human resources</a></li>
        <li><a href="prod.html">Production</a></li>
        <li><a href="eng.html">Engineering</a></li>
        <li><a href="feedback.html">Feedback</a></li>
        <li><a href="tees.html">Teesdock</a></li>
        <li><a href="cmp.html">Company mobile phones</a></li>
        <li><a href="cms.html">Climate Survery Updates</a></li>
        <li><a href="training.html">Training</a></li>
        <li><a href="sports.html">Sports Dome</a></li>
    </ul>
</div>
<!--The mainpage div is where all the page's indivdual content is displayed.-->
<div id="mainpage" class="auto-style1" style="height: 486px; width: 84%; float: right; color: #000000; font-size: 11pt;">
</div>
<!-- The container1 div is used to create the bottom green line in the site -->
</div>
<h3 id="container1" class="auto-style4" style="width: 100%"></h3>
</div>
<br>
<!-- Picturecontainer2 contains the image that creates the bottom site banner. -->
<div id="picturecontainer2" style="float: left;">
    <img alt="z" height="114" src="da.png" width="100%"></div>
</div>

</body>

</html>

CSS：

#container {
    overflow-x:hidden;
    margin: 0px;
    background-color: #008852;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    color: #FFFFFF;
    text-align: left;
    max-width: 10%;
}
#main
{
overflow-x:hidden;
    height: 100%;
    weight: 100&;
}
html, body {
    overflow-x: hidden;
    height: 100%;

}

#picturecontainer1{
    float: left;
}
#menubar

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-right: 30px
}
#menubar a:link, #menubar a:visited
{
    border-top-width: 1px;
    display: block;
    font-weight: bold;
    color: #000000;
    background-color: #EFF1EB;
    width: 180px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border-style: solid;
    border-color: #638529;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px;
    position: fixed;
}
#mainpage {
    border: thin solid #008852;
    width: 84%;
    float: none;
    background-color: #EDEFEE;
    height: auto;
    border-radius: 20px;
    height: 100%;
    position: fixed;
    color: #008852;
    clear: none;

}
#menubar a:hover, #menubar a:active
{
    background-color: #7A991A;
}
#menubar {
    border-width: 1px;
    border-style: none;
    font-size: xx-small;
    width: 50%;
    margin-top: 11px;
    float: left;
    vertical-align: 0%;
}
#bannerdiv 
{
    margin-bottom: 20px;
    }

.newStyle1 {
    text-align: left;
}
footer {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    background-color: #008852;
}
.auto-style1 {
    text-align: center;
    margin-left: 0px;
    margin-top: 11px;
    font-family: Georgia;
    margin-right: 0px;
}
s
#bannerdiv {
    text-align: center;
}
.auto-style4 {
    margin-left: 0px;
    text-align: left;
}
.auto-style5 {
    margin-top: 0px;
}
.auto-style8 {
    text-align: left;
    font-size: xx-small;
}
.auto-style6 {
    text-align: left;
    font-size: xx-small;
    font-weight: bold;
}
.auto-style10 {
    margin-left: 0px;
}
.auto-style12 {
    text-align: left;
    font-size: xx-small;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style11 {
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style9 {
    font-family: "Franklin Gothic Medium";
    position: fixed;
}
#container1 {
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 20px;
    background-color: #008852;
    clear: right;
}

#table {
}
#mainpage a:link, #mainpage a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
}
#picturecontainer2 {
    border-style: none;
    float: left;
    position: static;
    clear: none;
      display: inline;
    vertical-align: top;
    clear: both; 

}
#picturecontainer1 {
    border-style: none;
    width: 126px;
    border-right-width: thick;
    border-bottom-width: thick;
    border-left-width: thick;
}
.auto-style20 {
    text-align: center;
}
.auto-style21 {
    border-collapse: collapse;
    border-width: 0px;
    background-color: #EDEFEE;
}
.auto-style19 {
    text-align: left;
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style17 {
    text-align: left;
    font-size: x-small;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style15 {
    text-align: left;
    font-size: x-small;
    font-weight: normal;
}
.auto-style18 {
    text-align: left;
    font-size: 12pt;
}
#mainpage a:link, #mainpage a:visited {
}
.auto-style23 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    a text-decoration: none; 


}
.auto-style14 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
}
#picturecontainer2 img, #bannerdiv img {
    overflow: hidden;
    width: 100%;
}
.auto-style21 {
    font-weight: normal;
}
#picturecontainer2 {
    border-style: none;
    float: left;
}
.auto-style14 {
    text-align: center;
}
.auto-style15 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
#mainpage a:hover a: active {
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style25 {
    text-align: left;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style26 {
    text-align: left;
    font-size: x-small;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style38 {
    font-size: medium;
    text-align: center;
}
.auto-style27 {
    text-align: left;
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style24 {
    text-align: center;
}
p, h2, h3, h4, td, a  {
    color: #008852;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style14 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
}
.auto-style15 {
    text-align: left;
    font-size: 9pt;
    font-weight: normal;
}
.auto-style17 {
    text-align: left;
    font-size: 9pt;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
    text-align: left;
    font-size: 12pt;
}
.auto-style19 {
    text-align: left;
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
}
#picturecontainer2 {
    border-style: none;
    float: left;
}
.auto-style20 {
    text-align: left;
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style21 {
    font-weight: normal;
}
#query {
    height: 200px;
}
.auto-style30 {
    font-size: medium;
    text-align: left;
}
.auto-style32 {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}
.auto-style14 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
}
.auto-style15 {
    text-align: left;
    font-size: 9pt;
}
.auto-style17 {
    text-align: left;
    font-size: 9pt;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
    text-align: left;
    font-size: 12pt;
}
.auto-style19 {
    text-align: left;
    font-size: small;
}
#picturecontainer2 {
    border-style: none;
    float: left;
}
#wrapper {
min-width:100%
}

【问题讨论】：

对于看似简单的布局问题，要发布很多代码。你能把事情减少到重现你的问题所需的最低限度吗？然后，您可以基于该简化代码创建一个 jsFiddle；你甚至可以在这个过程中自己找到答案。
我在这里同意@Lorax。您能否创建一个小提琴并在此处提供带有精简版本的链接，该版本显示您要解决的问题？ jsfiddle.net

标签： css html positioning word-wrap

【解决方案1】：

从删除您在#mainpage 上的position:fixed 开始，看看这对您有何帮助。你确实有很多风格，这使得排除故障变得困难。您应该首先设置定位，然后在布局正确后添加漂亮的东西（恕我直言）。

【讨论】：