0
我有什麼代碼：這在CSS我對汽車的寬度上，這樣所有的內部的div必須對齊HTML柱造型和邊境的CSS
我的div容器內 包裝DIV outemost其包裝容器內div包含應該是相同高度的側邊欄。相反，他們不這樣做，我不知道爲什麼。我不想使用兩個側邊欄，而是希望保留右側邊欄，並將左側邊欄的內容從左側拖到右側邊欄。
另一個主要問題是，右側欄不斷溢出的文本，當我試圖溢出：隱藏它只是藏evrything側邊欄DIV這不是我想要的東西之外
這裏的jsfiddle這樣可以更好看見。我想停止在右側邊欄 溢出，當左邊欄寬度接觸右邊欄，然後在左邊欄的內容是我想要的按鈕，因爲他們走出屏幕，當我加寬寬度。
<!DOCTYPE html>
<html lang="en">
<html>
<title>Building Blocks to Html</title>
<head>
<SCRIPT language=JavaScript>
var updated = document.lastModified document.write("Last modified: " + updated)
</script>
<script src="start.js"></script>
<meta name="keywords" content="HTML, Hyper Text Markup Language, />
<meta name="description" content="HTML in easy steps. Introductory tutorial for beginners."/>
<meta name="author" content="Miguel Castaneda" />
<meta charset="UTF-8">
<meta name="robots" content="all, nofollow" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
<div id="wrapper">
<!-- wrapper holds everything should be auto -->
<div id="mod"></div>
<!-- end of mod -->
<center>
<a name="top"></center>
<center>
<a href="#bottom">Bottom</a>
</center>
<div id="mainmenu">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<!-- 5 table spacing links//-->
<li>
<a href="html.html">HTML</a>
</li>
<li>
<a href="python.html">Python</a>
</li>
<li>
<a href="widgets.html">Widgets</a>
</li>
<li>
<a href="contact_us.html">Contact Us</a>
</li>
</ul>
</div>
<!-- end of mainmenu -->
<div id="container">
//container holds content and sidebar
<div id="sidebar">
<p>HELLLLLLLLLLLEEEwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwMwwwwwwwwwwwwwwwwwwwwwwwwwEwwwwwwawawakdjadjlkajdlk;asmdksm.a</p>
</div>
<!-- end of sidebar -->
<div id="content">
<p >
<!-- browser picks first one in array if not in cpu then goes to 2nd font //-->
<tt>
Programmer: Miguel Castaneda(iSten23)
<br>
</br>
Head First HTML5 Programming
<br>
</br>
THIS SITE IS FOR EXPERIMENTAL PURPOSES, IS NOT INTENDED FOR COMMERCIAL PURPOSES.
</p>
</tt>
</div>
<!-- end of content -->
</div>
<!-- end of containeer-->
<center>
<a href="#top" id="topl">Top</a>
<div id="leftrightB" >
<UL id="ul-list">
<li>
<a id="rightB"href="basic5.html" class="addborder" >
<img src="arrow1.png" height="40" width="40" alt="Link to next page">
</a>
</li>
<li>
<a id="leftB"href="basic7.html" class="addborder">
<img src="arrow.png" height="40" width="40" alt="Link to next page">
</a>
</li>
</ul>
</div>
<!--end of leftrightB -->
<div id="footermenu">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<!-- 5 table spacing links//-->
<li>
<a href="html.html">HTML</a>
</li>
<li>
<a href="python.html">Python</a>
</li>
<li>
<a href="widgets.html">Widgets</a>
</li>
<li>
<a href="contact_us.html">Contact Us</a>
</li>
</ul>
</div>
<!-- END OF FOOTERMENU -->
<a name="bottom"></div>
<!-- END OF WRAPPER-->
</body>
<style>
#ul-list li {
}
a:hover {
color: #00f000;
text-shadow: 0px 2px green;
}
.addborder:hover {
border: 1px solid #000000;
}
#sidebar {
position: absolute;
right: 0;
margin-top: 2px;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
<!-- //white-space: nowrap;
//overflow: hidden;
//word-wrap: break-word -->
}
#wrapper {
width: auto;
}
#content {
position: absolute;
left: 0;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
}
<!-- img {
border-width: 1px;
border-color: Black;
}
--> .table {
display: table;
<!-- Allow the centering to work */ --> margin: 0 auto;
}
ul#ul-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#ul-list li {
display: inline;
}
#mainmenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
position: absolute;
top: 50px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#mainmenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#mainmenu li {
display: inline;
padding: 20px;
}
#mainmenu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#mainmenu a:hover {
color: #F90;
background-color: #FFF;
}
#footermenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #52D7E5;
//main color of the menu border-radius: 8px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#footermenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#footermenu li {
display: inline;
padding: 20px;
}
#footermenu a {
text-decoration: none;
color: #00F;
// padding: 8px 8px 8px 8px;
}
#footermenu a:hover {
color: #F90;
background-color: #17861A;
//color of gover over iterm
}
rightleftB {
display: table-cell vertical-align: bottom;
}
#wrapper {
width: 100%;
}
</style>
</html>