css - float 没有协调地扩展

Question

我有这个 css 代码，但左侧列中没有发生浮动，我的表格在页面中心不断增长。并且左侧的列没有相应地扩展。

http://jsfiddle.net/hadinetcat/E8jd3/14/

我的 CSS 代码

.container2 {
float:left;
width:15%;
background:#FFA500;
position:relative;
right:-0%;


}

.col1 {
float:left;
width:26%;
position:relative;
left:20%;
overflow:hidden;
height:570px;
bottom:-60px;


.footer {
        border:1px solid orange;
        position: relative;
        padding:0px;
        margin-top:-5px;
    font-size:15px;


    }

我的html代码

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Wellcome To Balhalfe Services Customer Reports</h1>
</div>

<div class="container2 ">


<div class="col1">
lililililili<br />
</div>

</div>


<div align="center">
        <H2 align="center"> Report Table</H></div> 

<table border="1" align="center"class="tableClass"> 
        <tr>
                <td><b>Name</b></td>
                <td><b>Mime</b></td>
                <td><b>Size (bytes)</b></td>
                <td><b>Created</b></td>
                <td><b>Download</b></td>
            </tr>

 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>eu contres.txt</td>
                <td>text/plain</td>
                <td>546</td>
                <td>2013-08-22 00:06:55</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=4&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>


  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

    <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

   <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?  id=6&company=companya'>Download</a></td>
            </tr>

   <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr> </table>



<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © balhalfe services 20103-2014</div>

Answer 1

添加一个“主”容器并给它一个属性显示

.main {
  height:auto;
  display:table;
}

和里面的div

.container1 {
  display:table-cell;
  width:15%;
}
.container2 {
  display:table-cell;
  width:85%;
}

编辑

检查此链接http://jsfiddle.net/E8jd3/69/