我正在寻求有关如何创建与多个浏览器站点兼容的固定宽度布局的代码建议。我查看了该站点上发布的其他几个问题，但没有一个问题能完全帮助我解决特定的编码问题。我将不胜感激任何使代码更实用的建议或提示。
网站主页的链接是 hooknhornsranch.com
我一直在使用的代码在这里：
<!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>Hook-N-Horns Ranch, LLC</title>
<style type="text/css">
#container {
position: fixed;
top: 0;
left: auto;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
height: 100%;
width: 100%;
right: auto;
z-index: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: scroll;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.outer{
position:relative;
height:200px;
width:200px;
border:solid blue 1px;
}
.top, .middle, .bottom{
height: 200px;
width: 200px;
border: solid red 1px;
top: 424px;
left: 14px;
position: absolute;
}
.bottom{
border:solid orange 1px;
}
.middle{
border:solid green 1px;
}
.inside-middle{
text-align:right;
display:block;
}
#menu{
height: 3px;
width: 615px;
padding-top: 67px;
padding-left: 495px;
top: -10px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#photo{
height: 300px;
width: 685px;
top: 90px;
left: 266px;
border: 12px solid #FFF;
}
#banner{
height: 225px;
width: 481px;
background-image: url(images/bannerslice.png);
background-repeat: no-repeat;
top: -2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#welcomeimage{
background-repeat: no-repeat;
width: 366px;
height: 225px;
left: 285px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#welcometext{
height: 166px;
width: 283px;
left: 650px;
padding-top: 50px;
padding-left: 15px;
padding-right: -60px;
font-size: 12px;
color: #12060A;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: ".tk-museo";
}
#footer{
height: 67px;
width: 754px;
top: 662px;
left: 249px;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.tk-museo-slab {
font-family: "museo slab";
font-size: 16px;
font-weight: 500;
text-align: left;
}
.tk-museo {
font-family: museo;
font-size: 11px;
font-weight: 300;
text-align: left;
}
a:link {
color: #190C0B;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #190C0B;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.muesoslab500white {
color: #FFFFFF;
}
.tk-museo {
font-family: ".tk-museo-slab-12p";
}
</style>
<script type="text/javascript" src="//use.typekit.net/brv6oja.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div class="bottom" id="container">
<div class="top" id="menu"><span class="tk-museo-slab"><span class="museoslab500"><a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/about.html">About </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/cattle.html">Cattle </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/wheat.html">Wheat </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/hunting.html">Hunting </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/management.html">Management </a></span></span></div>
<div class="bottom" id="photo"><img src="images/homepagecattle1.JPG" width="685" height="300" alt="cattle" /></div>
<div class="middle" id="banner">
</div>
<div class="middle" id="welcomeimage"><img src="images/welcomeimageslice.png" width="356" height="213" alt="Welcome to Hook-N-Horns Ranch" />
</div>
<div class="middle" id="welcometext"> <span class="tk-museo">In 2010, Hook-N-Horns Ranch, LLC was created as a small scale cattle and crop raising ranch. Today HNH manages over 1,000 acres of land with over 100 head of cattle.<br /><br />
HNH is proud to raise premium Black Angus beef, excellent crops of winter wheat as well as a maintaining healthy wildlife populations for large and small game hunting. Please explore our site to learn more about Hook-N-Horns Ranch. </span></div>
<img src="images/bigbackground.png" width="1280" height="800" />
</div>