我正在寻求有关如何创建与多个浏览器网站兼容的固定宽度布局的代码建议。我已经查看了本网站上发布的其他几个问题，但没有一个能完全帮助我解决我的具体编码问题。我将不胜感激任何建议或提示，以使代码更具功能性。
网站主页的链接是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>