制作网站首页导航栏，左中右三部分，全部设置左浮动，总宽度：1000px，宽度：左10px，中980px，右10px，左边部分总是不能跟中右两部分放到一行内
错误图片：
网页部分：
<!-- nav开始 -->
<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="list.html">关于慕课</a></li>
<li><a href="list.html">新闻动态</a></li>
<li><a href="list.html">课程中心</a></li>
<li><a href="list.html">在线课程</a></li>
<li><a href="list.html">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text"/>
</form>
</div>
</div>
<div class="nav_right"></div>
</div>
<!-- nav结束 -->
css部分：
.wrap{
width: 1000px;
margin: 0 auto;
}
.nav{
height: 40px;
}
.nav_left{
width: 10px;
background: url('../images/nav_left.jpg') no-repeat;
}
.nav_mid{
width: 980px;
background: url('../images/nav_bg.jpg') repeat-x;
}
.nav_right{
width: 10px;
background: url('../images/nav_right.jpg') no-repeat;
}
.nav_left,.nav_mid,.nav_right{
float: left;
height: 40px;
/* 元素内没有内容，无法撑开，设置高度将元素撑开 */
}
找了好久找不到问题到底出在哪里，把中间部分宽度调到700px以下才能让左中右在同一行显示，请各位大神帮帮忙
