网页布局_html/css_WEB-ITnose

初学者，对于自己布局比较困难，使用的是现有网页的模板，上中下结构，中间又分为左右两部分，左边是导航选项，点击后ajax更新右边的内容，现在的问题是我是直接使用的1330固定的宽度，浏览器没有全屏的时候，右边显示的表格就会掉下去，怎么固定在右边不掉啊，谢谢啊
nbsp;html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

    
    
    
    <script></script>
    <script></script>
    <script></script>

    






.bigclass {
background-repeat: no-repeat;
background-position: left center;
height: 25px;
width: 150px;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-align: left;
text-indent: 25px;
vertical-align: middle;
line-height: 26px;
cursor: hand;
background-image: url(../images/header13.gif);
margin-bottom: 6px;
margin-left: 31px;
margin-right: 0px;
margin-top: 11px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 1px;
}

.smallclass{
width: 150px;
height: 20px;
line-height: 7px;
}
.hiddendiv {
filter: alpha(opacity=70);
margin: 0px;
padding: 0px;
height: 44px;
width: 150px;
}

.blankdiv {
background-attachment: fixed;
background-repeat: repeat;
background-position: center center;
margin: 0px;
padding: 0px;
height: 27px;
width: 150px;
}
body{
background-color:#f0f0f0;
font-size:12px;
height: 100%;
margin:0 auto;
padding:0px;
}
a{
cursor: hand;
color: #0000ff;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;

}
a:active {
text-decoration: none;
}
div{
/*border: 1px #000000 solid;*/
}
#contain{
position: relative;
margin:0 auto;
padding:0px;
/*background-color:#ffffff;*/
width: 100%;
    height: auto;
text-align: center;
}
#contain #header{
position: relative;
text-align: right;
background-image: url(../images/headerlogo.gif);
background-position: center bottom;
background-repeat:no-repeat;
line-height: 36px;
width: 1310px;
height: 90px;
top:20px;
left:20px;
}

#contain #left{
position: relative;
left: 20px;
top:20px;
float: left;
clear:left;
width: 217px;
height:700px;
background-color:#f3fde8;
}

#contain #right{
position:relative;
top:20px;

float: right;
clear:right;
width: 1093px;
height: 700px;
right:18px;
background-color:#f9fef4;
/* background-image: url(../images/centertop.gif);*/
background-position:top;
background-repeat:no-repeat;
}

#fir{
background-image:url(../images/signout.gif);
background-position: center;
background-repeat:no-repeat;
left:20px;

width:217px;
height:32px;
line-height: 32px;
color: #ffffff;
font-style: inherit;
font-size:18px;
}
#showmenu{
position: relative;

height: 700px;
}
/* 对于显示列表的修饰 */
#showarticle{
font-family: "trebuchet ms", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse: separate;
}
 #showmenu .shownodes thead th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568f23;
border:1px solid #93ce37;
bord-bottom:3px solid #9ed929;
background-color:#9dd929;
background: -webkit-gradient(
linear;
left-bottom,
left-top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#showmenu .shownodes thead th:empty{
background:transparent;
border:none;
}
#showmenu .shownodes tbody th{
color:#fff;
text-shadow:1px 1px 1px #568f23;
background-color:#9dd929;
border:1px solid #93ce37;
border-right:3px solid #9ed929;
padding:0px 10px;
background:-webkit-gradient(
linear,
left bottom,
right top,
color-stop(0.02, rgb(158,217,41)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(123,192,67))
);
background: -moz-linear-gradient(
left bottom,
rgb(158,217,41) 2%,
rgb(139,198,66) 51%,
rgb(123,192,67) 87%
);
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
#showmenu .shownodes tbody td{
padding:10px;
text-align:center;
background-color:#def3ca;
border: 2px solid #e7efe0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#contain #rowfooter {
position: relative;
color:#555;
font-size:18px;
height: 50px;
padding:20px 0 40px;
text-align: center;
float:none;
margin-bottom: auto;
clear: both;
}

回复讨论(解决方案)

#contain {
position: relative;
margin: 0 auto;
padding: 0px;
/*background-color:#FFFFFF;*/
width: 100%;
height: auto;
text-align: center;
display:table;
}

楼主试试

把#contain #left的width值改为17%; #contain #rightr的width值改为83%.

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    
    


    
    
    
    

#contain {
position: relative;
margin: 0 auto;
padding: 0px;
/*background-color:#FFFFFF;*/
width: 100%;
height: auto;
text-align: center;
display:table;
}

楼主试试

谢谢啊，有用，这个，虽然有点走样但是效果挺好的，我再根据这个改改

把#contain #left的width值改为17%; #contain #rightr的width值改为83%.

首先，谢谢帮我解答，按百分比可以，我试了一下，但是浏览器窗口一旦缩小了，图片部分缩小的很严重，估计是因为写了太多具体的宽度吧，协调性不太好，还是谢谢啊

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    
    


    
    
    
    

非常感谢，你给的这个布局非常好，我会尝试用下你给的布局模板