我希望有人可以提供帮助。我已经搜索了该网站，虽然回答了类似的问题，但我仍然有点困惑。我的任务是建立新的工作网站，因为我过去有过 html 经验，我认为这将是掌握正确使用 css 构建网站的好方法，但我认为我自己有点混淆/混淆。我让它在主页上工作，但是这个页面有更多的内容 div 文本，它把我的页脚推开了。我已经阅读过诸如 position:absolute 和 clear: both; 之类的标签。一个也是，但我一生都无法弄清楚他们应该在哪里。
谢谢。
HTML 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Max - The leading name in digitisation</title>
<style type="text/css">
<!--
a:link { color: #000000; text-decoration: none}
a:visited { color: #000000; text-decoration: none}
a:hover { color: #000000; text-decoration: underline}
a:active { color: #000000; text-decoration: none}
-->
</style>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Max Communications" />
<style type="text/css" media="all">@import "css/about.css";</style> <style type="text/css" media="all">@import "css/about.css";</style>
</head>
<body>
<div id="page-container">
<div id="header">
<a href="index.html"><img src="images/logotype-max.png"></a>
<div id="subheader">
<h2>The leading name in digitisation</h2>
</div>
</div>
<div id="nav">
<b><a href="about.html">About</a></b><br>
<a href="services.html">Services</a><br>
<a href="clients.html">Clients</a><br>
<a href="cases.html">Case studies</a><br>
<a href="contact.html">Contact</a><br><br>
<a href="blog.html">David's blog</a><br><br>
<a href="http://www.twitter.com" target=_blank>Twitter</a><br>
<a href="http://www.facebook.com" target=_blank>Facebook</a><br>
<a href="http://www.youtube.com" target=_blank>YouTube</a><br>
</div>
<div id="content_l">
<p>Max Communications is the company of choice for
the digitisation of images, audio and video. We
have established ourselves as the leading provider
of digital solutions to large institutions, blue-chip
companies, galleries, museums and media organisations.
Quality products and professional service have enabled
us to attract and maintain a formidable <a href="clients">client list</a>.</p>
<p>Specialising in high quality, high volume digitisation
<a href="services">services</a>, we place an overriding emphasis on developing
friendly and long-term relationships with all our clients.</p>
<p>Our association over many years with both the heritage sector
and large media organisations has given us a sound understanding
of digital production workflow and quality management.</p>
<p>This puts us in a unique position to provide advice to clients
on utilisation of best practices and adherence to the latest
archive and industry standards. As a result, our clients are
able to leverage the greatest possible return from their
digital assets, in commercial, preservation and accessibility
terms.</p>
<p>We have a formidable array of high-end digitisation equipment.
We back this up with strong quality control and, for larger
projects, adherence to strict project management procedures
to ensure that deadlines are met - within budget.</p>
We are uniquely placed to assist with your digitisation requirements.
</ br></ br>
We are based in south-east London, serving both UK and international clients.</ br></ br>
</div>
<div id="content_r">
<img src="images/qb-max.jpg"
</div>
<br><br><br>
<hr style="color:#000000;background-color:#000000;height:1px;border:none;width:1400px;" /> </ br>
<div id="footer">
<div id="section1">
<div id="column1">
Max Communications</br>
*********</br>
**********</br>
T ************</br>
<a href="**************</a>
</div>
<div id="column2">
<b><a href="about.html">About</b></a></br>
<b><a href="index.html">Services</b></a></br>
<a href="index.html">Photographic, Microfilm and Glass plate</a> </br>
<a href="index.html">Manuscript scanning/photography</a></br>
<a href="index.html">Audio digitisation</a></br>
<a href="index.html">Video & moving image</a></br>
<a href="index.html">Digital printing and fulfilment</a></br>
<a href="index.html">OCR and eBook creation</a></br>
<a href="index.html">Print and picture framing</a></br>
<a href="index.html">Photographic conservation</a></br>
</div>
</div>
<div id="section2">
<div id="column3">
<b><a href="clients.html">Clients</b></a></br>
<b><a href="index.html">Case studies</b></a></br>
<a href="index.html">Bexley Heritage Trust</a></br>
<a href="index.html">Henry Moore Foundation</a></br>
<a href="index.html">Tate Gallery</a></br>
<a href="index.html">Country Life Picture Gallery</a></br>
<a href="index.html">Natural History Museum</a></br>
<a href="index.html">News International</a></br>
<a href="index.html">Victoria and Albert Museum</a></br>
<b><a href="contact.html">Contact</b></a>
</div>
<div id="column4">
<b><a href="index.html">David’s blog</b></a></br></br>
<b>Follow us</b></br>
<a href="http://www.twitter.com" target="_blank">Twitter</a></br>
<a href="http://www.facebook.com" target="_blank">Facebook</a></br>
<a href="http://www.vimeo.com" target="_blank">Vimeo</a></br></br>
<b>Legal</b><br>
<a href="index.html">Terms & Conditions</a><br>
<a href="index.html">Privacy Policy</a><br>
</div>
</div>
CSS 代码：
html, body {
background: #ff5000;
margin: 0;
padding: 0;
font-family:georgia;
}
.hidden {
display: none;
}
#page-container {
width: 1000px;
margin: auto;
padding: 60px;
}
#main-nav {
height: 50px;
}
#header {
clear: both;
height: 100px;
font-family: Georgia;
font-size: 10px;
margin: auto;
color: #000000;
line-height: 12px;
}
#subheader {
width: 400px;
float: right;
text-align: right;
font-size: 12px;
padding: 25px 5px;
}
h1 {
margin: 0;
padding: 0;
}
h2 {
float: right;
margin: 0;
padding: 0;
font-weight: normal;
}
#nav {
float: left;
width: 200px;
height: 300px;
font-family: Georgia;
font-size: 15px;
line-height: 1.4em;
word-spacing: 0.2em;ß
}
#content_l {
float: left;
width: 400px;
height: 300p;
font-family: Georgia;
font-size: 15px;
line-height: 1.4em;
word-spacing: 0.2em;
}
#content_r {
float: left;
width: 400px;
height: 100%;
font-family: Georgia;
font-size: 10px;
line-height: 1.4em;
word-spacing: 0.2em;
}
#footer, #column1, #column2, #column3, #column4{
}
#section1 {
float: left; /* Sets this section to the left */
background: none;
width: 650px;
}
#column1 {
float: left; /* Sets this column to the left inside its section */
background: none;
font-size: 14px;
width: 350px;
}
#column2 {
float: right; /* Sets this column to the right inside its section*/
background: none;
font-size: 14px;
width: 300px;
}
#section2 {
float: right; /*Sets this sectionto the right */
background: none;
width: 350px;s
}
#column3 {
float: left; /* Sets this column to the left inside its section */
background: none;
font-size: 14px;
width: 250px;
}
#column4 {
float: right; /* Sets this column to the right inside its section*/
background: none;
font-size: 14px;
width: 100px;
}
}