HTML+CSS

Estoy haciendo una web desde 0 y llevo ya la base y estoy aplicando los estilos, no se me dan muy bien la verdad, así que los aplico directamente en el index y es un maldito caos XD pero bueno van mas o menos bien jaja

Os pongo paso a paso lo que me ocurre:

Tengo la pagina dividada en:

---Logo---
---Navegacion---
---Introduccion---
---Area de contenido---Sidebar
---Footer---

Y el area de contenido le tengo metido texto pero al poner estilos como esta dentro de un div me sale asi:

Esta entre la introduccion y el footer.

Este es el codigo html+css de esa parte:

[code]<div id="content">  
<div id="mainContent">
    <section>  
        <!-- Blog post -->
        <article class="blogPost">  
    <header>  
        <h2>Trabajos Destacados</h2>  
    </header>  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>  
</article>    
    </section>    
</div>  
<aside>  
    <!-- Sidebar -->
    <h2>Club Coolaboro</h2>
    <ul>  
    	<li><a href="#">Home</a></li>  
    	<li><a href="#">Quienes Somos</a></li>  
    	<li><a href="#">Que Hacemos</a></li>  
    	<li><a href="#">Clientes</a></li>
        <li><a href="#">Club Coolaboro</a></li> 
	</ul>     
</aside>  

</div>[/code]

este son los estilos:

<style type="text/css" media="screen">
	
#content {  
display: table;  
}  
  

#mainContent {  
    display: table-cell;  
    width: 620px;  
    padding-right: 22px;
	background: #ffffff;  
}  
  
aside {  
    display: table-cell;  
    width: 300px;   
	margin: 10px;  
	font: 13px/22px Helvetica, Arial, sans-serif;  
	background: #b6c5f9;
	border-style: inset; 
}  
	

</style>  

Quiero que salga como menus mejor hechos, vamos con mas glamur pero no consigo hacerlo bien :S

Y lo otro es el footer que lo tengo así:

Y este es el codigo con sus estilos:

<footer>  

        <!-- Footer -->
        <style type="text/css" media="screen">
		footer {  

    position: absolute;  

    left: 0;  

    width: 100%;  

    background: url(nav_background.png);  

			}
		</style>
        <p align="center">Coolaboro CEE, C/O Donnell, 4 Oficina 18 - Tlfo 915677550 | Diseñada por <a href="http://diazgabriel.es/">Gabriel Díaz</a></p> 
    </footer>  

Si os dais cuenta sale un linea abajo muy molesta...T_T

Gracias por la ayuda