我有一个 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 & 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%
}