div跳位问题,大家帮我看看,怎么解决?

问题现象:当执行对输入框执行数据校验,显示错误信息的时候,DIV就跳位.大家帮帮我, 要怎么修改?
HTML代码:
<%@ page language="java" pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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>调查</title>
<link href="css/form.css" rel="stylesheet" type="text/css" />
<link href="css/wenjuan.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/text.js"></script>
  
  <script type="text/javascript">
    $(document).ready(function (){
   var title = $("#title"); 
   title.blur(function (){
     if(title.val() == ""){
   $("#titleError").html("标题不能为空");
 }    
   });
    
   jQuery("textarea").textlimit('span.counter',200);          
      }); 
      
    </script>
</head>
<body class="view">
<div class="container">
  <div class="banner">
   <div class="bannerleft"></div>
   <div class="bannerright"></div>
   <div class="bannercenter">调查</div>
  </div>
  <div class="content">
    <div class="left">&nbsp;</div>
    <div class="right">&nbsp;</div>
    <div class="mtable">
       <div class="list">&nbsp;</div>
       <div class="list">
       <div class="label"><label for="title">调查标题：</label></div>
       <div class="input">
        <span>*</span> 
          <input type="text" name="title" id="title" maxlength="100"/>
       </div>
      <div class="error" id="titleError">&nbsp;</div>
      </div>
  </div>
</div>
</div>
</body>
</html>css 代码:
.view {
background-color:#3C5C95;
font-size:12px;
margin:10px auto;
}
.container {
width:100%;
}
.banner {
width:500px;
border:#96A8C3 solid 1px;
clear:both;
}
.bannerleft{
background-image:url(../images/main_right_bannerhead_bg1.gif);
float:left;
width:10px;
}
.bannerright{
background-image:url(../images/main_right_bannerhead_bg2.gif);
width:10px;
float:right;
}
.bannercenter{
background-color:#496392;
color:#ECECEC;
text-align:center;
width:auto; 
line-height:28px;
vertical-align:middle;
}
.bannercenter, .bannerright, .bannerleft{
height:28px;
}
.content {
width:500px;
border:#96A8C3 solid 1px;
clear:both;
margin:0px;
overflow:hidden;
text-align:center;
}
.left {
background-image:url(../images/top_bg01.gif);
float:left;
}
.right, .left{
width:15px;
}
.right,.left,.mtable{
margin-bottom:-333333px;
padding-bottom:333333px;
}
.right{
background-image:url(../images/top_bg02.gif);
float:right;
}
.mtable {
margin-left:15px;
margin-right:15px;
background-color:#EFF1F7;
color:#6666FF;
text-align:center;
width:auto;
}
.submit{
text-align:center;
}
#submitform{
width:20px;
height:20px;
}
.list{
  background-color:#EFF1F7;
  color:#6666FF;
  clear:both;
  height:19px;
}
.label{
float:left;
margin-left:20px;
margin-bottom:10px;
margin-top:10px;
text-align:left;
line-height:19px;
vertical-align:middle;
width:60px;
}
.input{
float:left;
margin-left:10px;
margin-bottom:10px;
margin-top:10px;
}
textarea{
float:left;
}
#title{
width:200px;
}
select{
width:100px;
}
#total{
width:40px;
}
span{
color:red;
}
.error{
color:red;
float:left;
margin-left:20px;
margin-bottom:10px;
margin-top:10px;
line-height:19px;
vertical-align:middle;
position:static;
}

解决方案 »

  1.   

    问题的关键有以下几点: <div class="left">&nbsp; </div> 
                       <div class="right">&nbsp; </div> 
                       <div class="mtable"></div>  相当于是3列, 中间是内容,自动增长,左右是一个背景图片,
    的css:
    .right,.left,.mtable{ 
    margin-bottom:-333333px; 
    padding-bottom:333333px; 
    }
    .content { 
    width:500px; 
    overflow:hidden;
    } 通过上面的设置, 3列的高度能自动对齐, 但出现了新的问题, 就是通过javascript修改<div class="error" id="titleError">&nbsp; </div>的内容是,<div class="content"> 自动往下跳. 请大家帮我看看.怎么解决?
      
      

  2.   

    转去java web专区吧………………………………