这是我发布的以前格式化问题的后续内容。
Need Help Getting Page to Scroll
Need Help Formatting a HTML Page Layout
在这个版本中我使用的是相对div。问题在于我的顶部和底部页面导航div。封闭div中的数据显示在正确的位置，但边框没有正确显示。顶部导航div的边框显示在＆＃34; major_revision＆＃34;部分。底部导航div的边框在底部导航div上方显示为一行。
//<![CDATA[
function search(){
var text = document.getElementById('search').value;
if (text == "Keyword"){
window.open("https:\\www.google.com");
} else {
window.open("https:\\www.google.com&q="+text);
}
}
function passdata(){
var x = document.title;
var topic = get_meta_data("topic_area");
if (x.substring(0,5) == "About" || x.substring(0,10) == "Contact Us" ||x.substring(0,3) == "FAQ")
{
topic = "";
} else {
topic = topic.replace("<topic>", "");
topic = topic.replace("</topic>", "");
topic = topic.replace("Topic Area: ", "");
}
if (topic == x || topic == ""){
topic = "";
}else{
topic = ":" + topic;
}
if (x == "Testing")//<!--Mandatory-->
{
window.location = "improvement_request/improvement_request.html?" + x + topic;
}else{
window.location = "../improvement_request/improvement_request.html?" + x + topic;
}
}
function populate_topic_area()
{
document.getElementById('topicarea').innerHTML = get_meta_data("topic_area");
}
function get_meta_data(the_meta_tag)
{
var metas = document.getElementsByTagName('meta');
var answer = ""
for (i=0; i<metas.length; i++)
{
if (metas[i].getAttribute("name") == the_meta_tag)
{
answer = metas[i].getAttribute("content");
break;
}
}
return answer;
}
var query = window.location.search;
// Skip the leading ?, which should always be there,
// but be careful anyway
if (query.substring(0, 1) == '?')
{
query = query.substring(1);
}
var data = query.split(',');
for (i = 0; (i < data.length); i++)
{
data[i] = unescape(data[i]);
}
function CreateURLArray()
{
urlarray= new Array(11)
urlarray [0]= new Array(5)
urlarray [0]=["Testing","subpages/Previous_page.html","Previous","subpages/next_page.html","Next"] //The Page
urlarray [1]= new Array(5)
urlarray [1]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [2]= new Array(5)
urlarray [2]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [3]= new Array(5)
urlarray [3]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [4]= new Array(5)
urlarray [4]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [5]= new Array(5)
urlarray [5]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [6]= new Array(5)
urlarray [6]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [7]= new Array(5)
urlarray [7]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [8]= new Array(5)
urlarray [8]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [9]= new Array(5)
urlarray [9]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
urlarray [10]= new Array(5)
urlarray [10]=["","","","",""] //The Page,The Previous URL,What is displayed for the previous URL,The Next URL,What is displayed for the next URL
}
function handlerFunctions() {
var x = document.title;
var previous_url = '';
var previous_text = '';
var next_url = '';
var next_text = '';
for (i=0; i<10; i++)
{
if (urlarray [i][0]== x)
{
previous_url = urlarray [i][1];
previous_text = urlarray [i][2];
next_url = urlarray [i][3];
next_text = urlarray [i][4];
break;
}
}
function handlerFunctionPrev()
{
location.href = previous_url;
}
function handlerFunctionNext()
{
location.href = next_url;
}
if (previous_url == "")
{
document.getElementById('previous_text').style.display = "none";
document.getElementById('previous_text1').style.display = "none";
document.getElementById('previous').style.display = "none";
document.getElementById('previous1').style.display = "none";
}
else
{
document.getElementById('previous_text').innerHTML = previous_text;
document.getElementById('previous_text1').innerHTML = previous_text;
document.getElementById('previous').addEventListener ('click',handlerFunctionPrev,false);
document.getElementById('previous1').addEventListener ('click',handlerFunctionPrev,false);
}
if (next_url == "")
{
document.getElementById('next_text').style.display = "none";
document.getElementById('next_text1').style.display = "none";
document.getElementById('next').style.display = "none";
document.getElementById('next1').style.display = "none";
}
else
{
document.getElementById('next_text').innerHTML = next_text;
document.getElementById('next_text1').innerHTML = next_text;
document.getElementById('next').addEventListener ('click',handlerFunctionNext,false);
document.getElementById('next1').addEventListener ('click',handlerFunctionNext,false);
}
}
//]]>
</script>
<script type="text/javascript">
function start() {
CreateURLArray();
populate_topic_area();
handlerFunctions();
}
window.onload = start;body {color: #000;font-family: Arial, Helvetica, sans-serif;font-size: small;font-style: normal;background-color: #fff;}
#container {width: 100%;margin: 0;background-color: #fff;position: relative;padding: 0;}
#masthead {text-align: right;width: 100%;background-color: #0047ff;margin: 0;padding: 0;overflow: auto;}
#navigation {background-color: #ca7;overflow: hidden;width: auto;margin: 0;padding: 0;border: 0;clear: both;}
#page_content {position: relative;width: 96%;left: 20px;}
#footer {background-color: #dfcfbf;padding-bottom: 5px;width: auto;clear: both;overflow: auto;}
#masthead img {float: left;margin: 0;padding: 0;height:30px}
#masthead p {font-size: small;text-align: right;color: #000;margin: 0 0 0 0;padding: 0;background-color:#0047ff}
#navigation ul {list-style-type: none;width: 100%;margin: 0;padding: 0;}
#navigation li {float: left;}
#navigation a {color: #000;text-decoration: none;display: block;padding: 5px;border: 1px solid #ca7;background-color: #dc8;}
#navigation a:hover {color: #000;text-decoration: none;border: 1px solid #ed9;background-color: #ed9;}
#navigationcommon {background-color: #548EBE;overflow: hidden;border-bottom:thin black solid;}
#navigationcommon ul {list-style-type: none;width: 100%;margin: 0;padding: 0;}
#navigationcommon li {float: left;}
#navigationcommon li a {color: #FFF;text-decoration: none;display: block;padding: 5px;border: 1px solid #D3D3D3;background-color: #548EBE;}
#navigationcommon a {float:right;font:small-caption;border-style:none;color:white;vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;padding-left:5px;padding-right:5px}
#navigationcommon li a:hover {color: #000;text-decoration: none;border: 1px solid #D3D3D3;background-color: #ADD8E6;}
#navigationcommon a:hover {color: #000;text-decoration:underline;}
#major_revision{position:relative;float:left;width:100%;padding: 0 1% 1% 2%;}
#footer p {font-size: x-small;text-align: center;color: #393939;margin: 10px;padding: 1px;}
#footer a {color: #393939;text-decoration: underline;}
#footer a:hover {color: #000;text-decoration: none;}
.style_bold {font-weight: bold;}
#navigation_slideout {position: fixed;top: 85px;left: -340px;-webkit-transition-duration: .5s;-moz-transition-duration: .5s;-o-transition-duration: .5s;transition-duration: .5s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 0 0 40px #222;-moz-box-shadow: 0 0 40px #222;box-shadow: 0 0 40px #222;}
#navigation_slideout:hover { left: -39px;}
#navigation_slideout ul{ list-style: none;}
#navigation_slideout ul li {width:295px;height: auto;text-align: left;padding-top: 5px;font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;font-size: 12pt;color:white;font-weight:bold;}
#navigation_slideout ul li a{color: #000;text-decoration: none;font-weight:bold;display: block;color:white;}
#navigation_slideout ul li ul{ width:auto;}
#navigation_slideout ul li ul li { width:auto;position:relative;left:-41px;}
#navigation_slideout ul li ul li a {width:auto;height:30px;text-align:left;padding-top:5px;font-family: helvetica, arial, sans-serif;font-size: 12pt;color:white;font-weight:bold;}
#navigation_slideout ul li.expanding{height: auto }
#navigation_slideout ul li ul li.expanding1{height: auto;}
#navigation_slideout ul li ul li.expanding2{height: auto;margin-left:10px;}
#navigation_slideout ul li ul li a.expanding1 { padding:0;margin:0;height: auto ;}
#navigation_slideout ul li ul li a.expanding2 {padding:0;height: auto ;}
#menu{ -ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg); font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;font-size: 14pt;color:white;font-weight:bold; margin:0px 0px 0px 0px;right:0px;padding:0px 0px 0px 0px}
#menu a{ font-size: 14pt;color:white;font-weight:bold;text-decoration:none;}
table.nospacing {border-collapse: collapse;border-spacing: 0; table-layout: fixed;}
table.nospacing th, td { padding: 0;}
.menu-col{max-width: 30px;}
.round{border-radius: 25px;-moz-border-radius: 25px;-webkit-border-radius: 25px;}
.expanding label{padding: 3px;padding-left: 25px;}
.expanding li > ul { left:-35px;position:relative;width:100%;}
.expanding input[type=checkbox] {display: none;}
.expanding input[type=checkbox] ~ ul {max-height: 0;max-width: 0;opacity: 0;overflow: hidden;white-space:nowrap; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; }
.expanding input[type=checkbox]:checked ~ ul {max-height: 100%;max-width: 100%;opacity: 1;}
.expanding input[type=checkbox] + label:before{transform-origin:25% 50%; border: 8px solid transparent; border-width: 8px 12px; border-left-color: white; margin-left: -20px;width: 0;height: 0;display: inline-block;text-align: center;content: '';color: #AAAFAB; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; position: absolute;margin-top: 1px;}
.expanding input[type=checkbox]:checked + label:before {transform: rotate(90deg);}
.expanding_30{margin-left:30px;}
.expanding_0{margin-left:0px;text-indent:-10px;}
.expanding_40{margin-left:40px;text-indent:-10px;}
.expanding_50{margin-left:50px;text-indent:-10px;}
.expanding_width_menu{width:295px;}
.h2b {font-size: 17.5pt;color: #469;font-family: Arial, Helvetica, sans-serif;font-weight:bold;}
.h1b {font-size: 20pt;color: black;font-family: Arial, Helvetica, sans-serif;font-weight:bold}
.top-nav-but{position:relative;width:100%;margin:0 0 0 2%;border:thin red solid;display:block}
.bottom-nav-but{position:relative;width:100%;margin:0 0 0 2%;border:thin green solid}
.nav-but-left{position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF}
.nav-but-left-p{text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;}
.nav-but-right{position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF}
.nav-but-right-p{text-align:right;background-color:transparent;margin:.5% 1% .5% 0;}
.topic_title{position:relative;float:left;width:98%;padding: 10px 0% 0% 2%;}
.page_content{width:98%;clear:both}
.left_column{position:relative;float:left;width:80%;padding: 0% 1% 1% 2%;}
.right_column{position:relative;float:left;width:15%;padding: 1%;}
.clearfix { content: ""; display: table; clear: both;}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>Testing</title>
<meta name="topic_area" content="Topic Area: <topic>Testing</topic>" /><!--Mandatory-->
</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<header id="masthead" onclick="">
<p style="background-color:#0047ff">
<!--See helper file for paths to image files-->
<img style="float:left" src="Left.jpg" alt="" height="30" width="155px" ><img style="float:right" src="right.jpg"
alt="" height="30" width="104px" ></p>
</header>
<!-- End Masthead -->
<nav id="navigationcommon" onclick="">
<ul>
<!--See helper file for paths to image files-->
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#" >Contacts</a></li>
<li>
<a href="improvement_request/improvement_request.html" onclick="passdata(); return false">Improve This Document</a></li>
<li><a href="tailor_this/tailor_this.html">Tailor This Document</a></li>
</ul>
<a href="#">Advanced Search</a>
<!--See helper file for paths to image files-->
<input type="image" src="pill-button-green-clip-art.jpg" style="width: 90px; border-style:none; float:right; height: 28px;"value="Search"
onclick="search()">
<input name="search" type="text" maxlength="512" id="search" class="searchField" title="" style="width: 300px;
border-style:none; height: 26px; float:right; padding-right:5px; " value="Keyword" >
</nav>
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1"onclick="">
<table class="nospacing" style="border-style:none">
<tr>
<td>
<ul class="expanding_width_menu">
<li class="expanding_30"><a href="home.html">Home</a></li>
<li class="expanding_30"><a href="about/about.html">About</a></li>
<li class="expanding_30"><a href="contact/contacts.html" >Contacts</a></li>
<li class="expanding_30" style="display:none"><a href="faq/faqs.html" >FAQs</a></li>
<li class="expanding_30" style="display:none"><a href="#" >Topic Area PDF</a></li>
</ul>
<hr width="200px">
<ul class="expanding_width_menu">
<li class="expanding_40"><a href="#">Requirements</a></li>
<li class="expanding_50"><a href="#">Requirement 1</a></li>
<li class="expanding_50"><a href="#">Requirement 2</a></li>
<li class="expanding_50"><a href="#">Requirement 3</a></li>
<li class="expanding_50"><a href="#">Requirement 4</a></li>
</ul>
<hr width="200px">
<ul class="expanding_width_menu" style="position:relative">
<li class="expanding"><input class="expanding" type="checkbox" id="cb1"><label class="expanding" for="cb1">How to Make a Sandwich</label>
<ul class="expanding expanding_40">
<li class="expanding2"><a class="expanding2" href="#" >Bread</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Vegetables</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Cheese</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Condiments</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Meats</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Fillings</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Preparation</a></li>
</ul>
</li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb2"><label class="expanding" for="cb2">How to Make a Sandwich</label>
<ul class="expanding expanding_40">
<li class="expanding2"><a class="expanding2" href="#" >Bread</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Vegetables</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Cheese</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Condiments</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Meats</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Fillings</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Preparation</a></li>
</ul>
</li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb3"><label class="expanding" for="cb3">How to Make a Sandwich</label>
<ul class="expanding expanding_40">
<li class="expanding2"><a class="expanding2" href="#" >Bread</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Vegetables</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Cheese</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Condiments</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Meats</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Fillings</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Preparation</a></li>
</ul>
</li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb4"><label class="expanding" for="cb4">How to Make a Sandwich</label>
<ul class="expanding expanding_40">
<li class="expanding2"><a class="expanding2" href="#" >Bread</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Vegetables</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Cheese</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Condiments</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Meats</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Fillings</a></li>
<li class="expanding2"><a class="expanding2" href="#" >Preparation</a></li>
</ul>
</li>
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid">
<p id="menu"><a href="#" onclick=";return false;">MENU</a></p>
</td>
</tr>
</table>
</div>
<!-- Begin Page Content -->
<section id="page_content" onclick="">
<div id="major_revision">
<p><span id="topicarea" style="font-weight:bold"></span><br>
<span style="font-size:x-small">Major Revision: <revision>1.0</revision><!-- Format is Major Revision: #.# -->
Release Date: <release_date>7/1/2015</release_date></span></p><!-- Format is Release Date: mm/dd/yyyy -->
</div>
<!-- Below is for the navigation buttons on the top of the screen. It goes ABOVE the LEFT COLUMN <div> -->
<div class="top-nav-but clearfix">
<!---->
<div class="nav-but-left">
<p class="nav-but-left-p">
<input style="background-color:#DFCFBF" name="previous" id="previous" type="button" value="<< Prev"onclick="page_navigation('previous')" class="round"/><br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text" class="style_bold"></span>
</p>
</div>
<div class="nav-but-right">
<p class="nav-but-right-p">
<input style="background-color:#DFCFBF" name="next" id="next" type="button" value="Next >>"onclick="page_navigation('next')" class="round"/><br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the top of the screen -->
<div class="topic_title h1b">TESTING</div>
<!-- Begin Left Column -->
<div class="page_content">
<div class="left_column">
<!-- <span class="h1b">SpaceWeb Developer Training
</span>
<br> -->
<span class="h2b">Left Column</span>
<p>
T-bone kevin meatloaf brisket ground round capicola filet mignon porchetta short loin. Pork chop filet mignon frankfurter porchetta, spare ribs shankle pancetta biltong meatloaf turkey doner short loin. Sausage pig hamburger porchetta, beef ribs shoulder prosciutto ground round bresaola cow pork chop. Brisket turducken chicken, ribeye pork chop boudin ham hock.
</p>
<p>
Alcatra meatloaf sirloin pork chop cupim pancetta. Ground round tenderloin meatloaf alcatra, flank biltong leberkas pork bacon sausage tongue chicken beef jowl. Bresaola drumstick hamburger ground round meatloaf. Alcatra short ribs leberkas kielbasa, ground round ham hock shankle bacon filet mignon pastrami chicken flank bresaola jerky landjaeger.
</p>
<p>
Turducken filet mignon venison bresaola, swine picanha drumstick. Fatback pancetta porchetta pig biltong. Ribeye tenderloin jowl, kielbasa salami meatball cupim andouille. Meatloaf shankle tail porchetta ham shank hamburger bacon, jowl picanha pork ribeye turducken tongue. Ribeye sirloin meatloaf, pork chicken boudin frankfurter shank cupim spare ribs. Pork chop turkey flank drumstick chuck salami pig filet mignon kielbasa corned beef kevin capicola sausage.
</p>
<p>
Beef kevin ham hock, tenderloin hamburger beef ribs sausage. Doner kielbasa sausage frankfurter, jowl turkey sirloin strip steak chicken turducken pancetta tri-tip beef ribs. Shankle pastrami alcatra, jerky fatback prosciutto rump pork chop chicken filet mignon picanha pork t-bone. Ribeye tongue tail, bresaola jowl fatback pork loin corned beef.
</p>
<span class="h2b">Left Column</span>
<p>
T-bone kevin meatloaf brisket ground round capicola filet mignon porchetta short loin. Pork chop filet mignon frankfurter porchetta, spare ribs shankle pancetta biltong meatloaf turkey doner short loin. Sausage pig hamburger porchetta, beef ribs shoulder prosciutto ground round bresaola cow pork chop. Brisket turducken chicken, ribeye pork chop boudin ham hock.
</p>
<p>
Alcatra meatloaf sirloin pork chop cupim pancetta. Ground round tenderloin meatloaf alcatra, flank biltong leberkas pork bacon sausage tongue chicken beef jowl. Bresaola drumstick hamburger ground round meatloaf. Alcatra short ribs leberkas kielbasa, ground round ham hock shankle bacon filet mignon pastrami chicken flank bresaola jerky landjaeger.
</p>
<p>
Turducken filet mignon venison bresaola, swine picanha drumstick. Fatback pancetta porchetta pig biltong. Ribeye tenderloin jowl, kielbasa salami meatball cupim andouille. Meatloaf shankle tail porchetta ham shank hamburger bacon, jowl picanha pork ribeye turducken tongue. Ribeye sirloin meatloaf, pork chicken boudin frankfurter shank cupim spare ribs. Pork chop turkey flank drumstick chuck salami pig filet mignon kielbasa corned beef kevin capicola sausage.
</p>
<p>
Beef kevin ham hock, tenderloin hamburger beef ribs sausage. Doner kielbasa sausage frankfurter, jowl turkey sirloin strip steak chicken turducken pancetta tri-tip beef ribs. Shankle pastrami alcatra, jerky fatback prosciutto rump pork chop chicken filet mignon picanha pork t-bone. Ribeye tongue tail, bresaola jowl fatback pork loin corned beef.
</p>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div class="right_column">
<span class="h2b">Right Column</span>
<p>
T-bone kevin meatloaf brisket ground round capicola filet mignon porchetta short loin. Pork chop filet mignon frankfurter porchetta, spare ribs shankle pancetta biltong meatloaf turkey doner short loin. Sausage pig hamburger porchetta, beef ribs shoulder prosciutto ground round bresaola cow pork chop. Brisket turducken chicken, ribeye pork chop boudin ham hock.
</p>
<p>
Alcatra meatloaf sirloin pork chop cupim pancetta. Ground round tenderloin meatloaf alcatra, flank biltong leberkas pork bacon sausage tongue chicken beef jowl. Bresaola drumstick hamburger ground round meatloaf. Alcatra short ribs leberkas kielbasa, ground round ham hock shankle bacon filet mignon pastrami chicken flank bresaola jerky landjaeger.
</p>
<p>
Turducken filet mignon venison bresaola, swine picanha drumstick. Fatback pancetta porchetta pig biltong. Ribeye tenderloin jowl, kielbasa salami meatball cupim andouille. Meatloaf shankle tail porchetta ham shank hamburger bacon, jowl picanha pork ribeye turducken tongue. Ribeye sirloin meatloaf, pork chicken boudin frankfurter shank cupim spare ribs. Pork chop turkey flank drumstick chuck salami pig filet mignon kielbasa corned beef kevin capicola sausage.
</p>
<p>
Beef kevin ham hock, tenderloin hamburger beef ribs sausage. Doner kielbasa sausage frankfurter, jowl turkey sirloin strip steak chicken turducken pancetta tri-tip beef ribs. Shankle pastrami alcatra, jerky fatback prosciutto rump pork chop chicken filet mignon picanha pork t-bone. Ribeye tongue tail, bresaola jowl fatback pork loin corned beef.
</p>
<!-- End Right Column -->
</div>
<!-- Below is for the navigation buttons on the bottom of the screen. It goes BELOW the RIGHT COLUMN </div> -->
<div class="bottom-nav-but clearfix">
<div class="nav-but-left">
<p class="nav-but-left-p">
<input style="background-color:#DFCFBF" name="previous" id="previous1" type="button" value="<< Prev"onclick="page_navigation('previous')" class="round"/><br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text1" class="style_bold"></span>
</p>
</div>
<div class="nav-but-right">
<p class="nav-but-right-p">
<input style="background-color:#DFCFBF" name="next" id="next1" type="button" value="Next >>"onclick="page_navigation('next')" class="round"/><br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text1" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the bottom of the screen -->
</div>
</section>
</div>
<!-- End Container -->
<!-- Begin Footer -->
<div id="footer">
<p>Copyright © All Rights Reserved.</p>
</div>
<!-- End Footer -->
</body>
</html>
更新为包含clearfix类。现在边界包含的不仅仅是导航div。
答案 0 :(得分：0)
您需要将clear: both添加到top-nav-but和bottom-nav-but类：
.top-nav-but{
position:relative;
width:100%;
margin:0 0 0 2%;
border:thin red solid;
display:block;
clear: both;
}
.bottom-nav-but{
position:relative;
width:100%;
margin:0 0 0 2%;
border:thin green solid
clear: both;
}
clear: both与您使用的clearfix类之间的区别在于clear: both确保元素清除任何前浮动元素，并且clearfix类确保在父框中清除任何内部浮动元素（从而确保边框等按预期工作）。
答案 1 :(得分：0)
我需要添加一个clearfix类。 Makshh指出我正确的方向。我发现以下帖子有帮助：