css добавить пространство над нижним колонтитулом

Question

У меня есть код css с html Я хотел бы добавить пространство над нижним колонтитулом, так как мои таблицы приклеиваются к нижнему колонтитулу напрямую.

, пожалуйста, убедитесь, что каждый раз, когда я добавляю табличное пространство, должно быть там. между таблицами и нижними колонтитулами.

вы можете просмотреть свой код на http://jsfiddle.net/hadinetcat/E8jd3/6/

CSS код

<style type='text/css'> 



.container3 { 
float:left; 
width:100%; 
/*background:green;*/ 
overflow:hidden; 
position:relative; 
} 
.container2 { 
float:left; 
width:100%; 
background:#FFA500; 
position:relative; 
right:45%; 

} 
.container1 { 
float:left; 
width:100%; 
/*background:red;*/ 
position:relative; 
right:40%; 
} 

.col1 { 
float:left; 
width:26%; 
position:relative; 
left:87%; 
overflow:hidden; 
height:570px; 

} 

.col2 { 
float:left; 
width:50%; 
position:relative; 
left:90%; 
overflow:hidden; 

} 

.col3 { 
float:left; 
width:26%; 
position:relative; 
left:80%; 
overflow:hidden; 

} 

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


    } 


.signout { 
position:  absolute; 
width:   200; 
bottom:   150px; 
left:   5px; 
clear: both; 
font-size:20px; 
text-align:center 
} 

</style> 

HTML

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

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

<div class="container3 "> 
<div class="container1 "> 
<div class="container2 "> 


<div class="col1"> 

lalalallalalalallala <br /> 
lllllllllllllllllllll <br /> 

</div> 


<div class="col2"> 

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

<table border="1" align="center"> 
     <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> 
</table> 

</div> 

<div class="col3"> 

</div> 

</div> 

</div> 

<div class="signout"> 

<a style='text-decoration:none;' href= "index.html">Sign Out </br></a> 

</div> 

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

</div> 

Answer 1

Здесь обновляется fiddle

Добавить несколько пикселей в таблицу margin-bottom в CSS.

Например

table{ 
    margin-bottom:60px; 
} 

Answer 2

Ничего не трогать, просто добавьте padding-bottom: 20px; в .col2

.col2 является контейнер для вас стола тела

Попробуйте это:

.col2 { 
    float: left; 
    width: 50%; 
    position: relative; 
    left: 90%; 
    overflow: hidden; 
    padding-bottom: 20px; 
} 

New Demo

Answer 3

дает больший запас для футера как этого

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