0
我是剛剛開始Web開發的學生。我必須爲作業創建一個Web組合。Floating Div的調整大小問題
我有一個導航欄在div左浮動。而一個內容div漂浮右邊，這是一個關於我的部分段落和列表等
當我調整瀏覽器的大小，我得到一定的大小和右手內容div下降。我寧願內容div中的文本只是繼續壓縮到div？ 注意我必須在HTML/CSS中完成此任務，因爲稍後會在我的任務中使用javascript解決方案。
我已將所有個人信息從段落中提取出來，並放入相似數量的文本。
道歉，如果這是一個愚蠢的問題，我的代碼將是業餘的，因爲我只是仍在學習。
任何幫助將不勝感激。
#container
{
width: 80%;
min-width: 1000px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
margin-left: auto;
margin-right:auto;
border: 2px solid #000000;
background-color:#e6e6e6;
}
body
{
background-image: url(../images/back1.jpeg);
}
#portrait{
float:right;
margin-right:30px;
margin-top:30px;
height:196px;
width:150px;
}
#header
{
height:258px;
width:auto;
color:#ffffff;
font-size:45px;
text-decoration: none;
background-image: url(../images/head2.jpeg);
background-size: cover;
border:.1px outset #000000;
}
#navigation
{
width:19%;
margin-top:0px;
float:left;
width:250px;
height:1400px;
background-color:#6b6b6b;
}
#content
{
max-width:75%;
min-width:40%;
padding:0px 20px 20px 0px;
float:right;
margin:0px;
display:inline;
border:2px solid #000000;
}
#footer
{
clear:left;
background:#e6e6e6;
height:60px;
color:#ffffff;
background-color:#000000;
}
#navbar
{
height:80%;
}
#navmenu
{
padding:0px;
margin-left:0px;
}
#navmenu li
{
margin-right:20px;
margin-left:20px;
display:block;
padding-top:100px;
float:left;
}
a.navbutton
{
border:3px outset #606060;
display:block;
background-image:url(../images/buttons/button_normal.jpg);
text-decoration:none;
color:#ededed;
font-family:Tahoma, verdana, arial, sans-serif;
font-weight:bold;
font-size:15px;
width:200px;
height:34px;
padding-top:6px;
text-align:center;
color:black;
}
a.navbutton2
{
border:3px outset #606060;
display:block;
background-image:url(../images/buttons/button_current.jpg);
text-decoration:none;
color:#000000;
font-family:Tahoma, verdana, arial, sans-serif;
font-weight:bold;
font-size:20px;
width:200px;
height:34px;
padding-top:6px;
text-align:center;
color:black;
}
a.navbutton:hover, a.navbutton2:hover
{
border: 3px outset #2090d0;
background-image:url(../images/buttons/button_hover.jpg);
color:#444444;
}
a.navbutton:active, a.navbutton2:active
{
border: 3px inset #eecc44;
background-image:url(../images/buttons/button_current.jpg);
color:#444444;
}
.email
{
margin:20px;
float:left;
}
.copyright
{
margin:20px;
float:right;
}<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/new.css" />
<style type="text/css">
.green {color: #008000;}
h2 {color: blue;font-style: italic;}
.bold {font-weight: bold;}
</style>
<title>Tim CA2</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="portrait">
</div>
<div id="header">
<h1>Header</h1>
</div>
<div id="content-container">
<div id="navigation">
<div id="navbar">
<ul id="navmenu">
<li><a class="navbutton2" href="index.html">Home</a></li>
<li><a class="navbutton" href="about.html">About Me</a></li>
<li><a class="navbutton" href="resume.html">Resume</a></li>
<li><a class="navbutton" href="webdev.html">Web Skills</a></li>
<li><a class="navbutton" href="pcbuild.html">PC Build</a></li>
<li><a class="navbutton" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText<p>
<ul>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
</ul>
<p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText<p>
<ul>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
</ul>
</div>
</div>
<div id="footer">
<p class="copyright">Copyright ©<p>
</div>
</div>
</body>
</html>
https://jsfiddle.net/05a3g2pw/ –