一个传统的页面设计（希望对你有帮助）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type=text/javascript>
function menuFix()
{
//menu菜单函数
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
     for (var i=0; i<sfEls.length; i++)
    {
          sfEls[i].onmouseover=function()
        {
              this.className+=(this.className.length>0? " ": "") + "sfhover";
          }
          sfEls[i].onMouseDown=function()
        {
              this.className+=(this.className.length>0? " ": "") + "sfhover";
          }
          sfEls[i].onMouseUp=function()
        {
              this.className+=(this.className.length>0? " ": "") + "sfhover";
          }
          sfEls[i].onmouseout=function()
        {
              this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), "");
          }
     }
}
//firefox下层中内容换行函数
 function toBreakWord(intLen, id){
  var obj=document.getElementById(id);
  var strContent=obj.innerHTML;
  var strTemp="";
  while(strContent.length>intLen){
   strTemp+=strContent.substr(0,intLen)+"<br>";
   strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}



/*
//left菜单互换函数 ,好像不行
function leftOrRight()
{
  var tt = document.getElementById("tt");
  var ss = document.getElementById("ss");
    tt.style.clear='left';
    tt.style.float='left';
    ss.style.float='right';
    alert(ss);
}
window.onload=menuFix();
*/
</script>

<script type="text/javascript" src="Js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    menuFix();
  $("#test").click(function()
  {
   var txt = $("#test").val() ;

   if(txt=="test")
   {
   $("#test").val("test2") ;
    $("#ss").css("float","right");
            $("#tt").css("float","left");
                        $("#tt").css("clear","left");
   }else
   {
    $("#test").val("test") ;
    $("#ss").css("float","left");
            $("#tt").css("float","right");
                        $("#tt").css("clear","right");
   }
  }
  );
});

</script>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body{margin:0px auto 0px auto; text-align:center; font-size:13px; color: #16387c}
#nav {  line-height: 24px;  list-style-type: none; background:#666;}
#nav a { display: block; width: 80px; text-align:center;}
#nav a:link  { color:#666; text-decoration:none;}
#nav a:visited  { color:#666;text-decoration:none;}
#nav a:hover  { color:#FFF;text-decoration:none;font-weight:bold;}
#nav li { float: left; width: 80px; background:#CCC;}
#nav li a:hover{ background:#999;}
#nav li ul {
line-height: 27px;
list-style-type: none;
text-align:left;
left: -999em;
position: absolute;
float:left;}
#nav li ul li{ float: left; width: 80px; background: #F6F6F6; }
#nav li ul a{ display: block; width: 80px;text-align:center;}
#nav li ul a:link  { color:#666; text-decoration:none;}
#nav li ul a:visited  { color:#666;text-decoration:none;}
#nav li ul a:hover  { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00;}
#nav li:hover ul { left:auto;}
#nav li.sfhover ul { left:auto;}
#nav1 li {list-style:none; width:200px; margin-top:5px;padding:4px 6px;}
#nav1 li a {text-decoration:none; color:#666;}
#nav1 li a:hover {color:#000;}
.aa {border-top:4px solid #7BC110; background:#be6;}
.bb {border-top:4px solid #ff9900; background:#fc3;}
.cc {border-top:4px solid #ff66ff; background:#fcf;}
</style>
</head>

<body>
<!--Root-->
<div style="width:80%; height:100%; border:none; clear:both; text-align:center;margin-left: auto; margin-right: auto;">
    <!--Head-->
    <div style="height:85px; border:none; clear:both">
        <div style="width:20%; height:85px; background-color:#ccd; float:left; border:none">Logo</div>
        <div style="width:80%; height:85px; background-color:#0099FF; border:none; clear:right; float:right">Banner</div>
    </div>
    <!--Menu-->
    <div style="width:100%; clear:both; background-color:#ccc; position:inherit;">
        <ul id="nav">
            <li><a href="http://www.Fly124.cn">系统首页</a></li>
            <li>
                <a href="#">产品介绍</a>
                <ul>
                    <li><a href="#">产品一</a></li>
                    <li><a href="#">产品一</a></li>
                    <li><a href="#">产品一</a></li>
                    <li><a href="#">产品一</a></li>
                    <li><a href="#">产品一</a></li>
                    <li><a href="#">产品一</a></li>
                </ul>
            </li>
            <li>
                <a href="#">服务介绍</a>
                <ul>
                    <li><a href="#">服务二</a></li>
                    <li><a href="#">服务二</a></li>
                    <li><a href="#">服务二</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    <div style="height:85%; clear:both">
        <div  id="ss" style="width:20%; height:100%; background-color:#ccc; float:left; border:none">
        <ul id="nav1">
        <li class="aa"><a href="#">CSS Templates Free Download </a></li>
        <li class="bb"><a href="#">CSS WebSites Showcase </a></li>
        <li class="cc"><a href="#">CSS Web Design Article </a></li>
        </ul>    
        </div>
        <div id="tt"  style="width:80%; height:100%; background-color:#999; border:none; clear:right; float:right; word-wrap:break-word;
word-break:break-all;">
sadfjsajfdjklasjflaskjflkajflkafjlkasjfdkasljfdasssssssssssssssssssssssssssssssssssssssadfasl;123123sadfhasddfjhkkk123123kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk123123kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk123123123
        </div>
    </div>
    <div style="width:100%; background-color:#3399FF;"><input type="button" id="test" value="test"/></div>
</div>
</body>
</html>
<script>
if(window.ActiveXObject){<!--IE浏览器-->
} else{
  toBreakWord(100,"tt");
}
</script>