Foros del Web - Ver Mensaje Individual

Adler · #6 (**permalink**) 01/04/2011, 07:51

@kseso?, que tal?

Estas imágenes lo aclararán

Esto es lo que obtengo hasta ahora

y esto es lo que quiero conseguir

Como veréis se trata de centrar los div's (tablas) al contenedor verde.

Un código algo más elabarado

Código HTML:

Ver original<!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" dir="ltr" lang="es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
 
html, body  {
width: 100%;
background-color: #FFF;
margin: 0; 
}
 
#principal_cont {
text-align: center;
min-height: 100%;
height: auto !important;
max-width: 84%;
margin: 0 auto;
}
 
 
#desarrollo_tema {
background-color: red;
border: 1px solid #B6B6B6; 
color: #000000;
font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 10px 10px 3px 25px;
text-align: left;
margin-top: 60px;
}   
 
 
.contenedor_tabla {
background-color: green;
margin: 0 auto;
overflow: hidden;
width: 100%;
}
 
.tabla {
float: left;
padding: 20px;
}
 
 
.tabla table {
background-color: #C9C9C9;
width: 100%;
padding: 0;
}
 
.tabla thead th {
background-color: #EEE;
color: #000000;
}
 
.tabla thead td {
background-color: #F5F5F5;
color: #696969;
}
 
.tabla tbody td {
background-color: #FFF;
color:  #000000;
font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: left;
padding: 3px 7px;
}
 
.tabla tbody i {
color: #696969;
}
 
.tabla tfoot {
background-color: #FFF;
}
 
.tabla thead th, .tabla thead td {
font: bold 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: center;
padding: 3px 7px;
}
</style>
</head>
<body>
<div id="principal_cont"> 
 
<div id="desarrollo_tema">
 
 
<div class="contenedor_tabla ">
 
 
<div class="tabla">
<table cellspacing="1px">
<thead>
<tr>
<th colspan="2">Listado</th>
</tr>
<tr>
<td>Producto</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td><b>Producto1</b></td>
<td>15</td>
</tr><tr>
<td><b>Producto2</b></td>
<td>40</td>
</tr><tr>
<td><b>Producto3</b></td>
<td>30</td>
</tr><tr>
<td><b>Producto</b></td>
<td>2</td>
</tr><tr>
<td><b>Producto4</b></td>
<td>98</td>
</tr><tr>
<td><b>Producto5</b></td>
<td>4</td>
</tr><tr>
<td><b>Producto6</b></td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
 
 
<div class="tabla">
<table cellspacing="1px">
<thead>
<tr>
<th colspan="2">Listado</th>
</tr>
<tr>
<td>Producto</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td><b>Producto1</b></td>
<td>15</td>
</tr><tr>
<td><b>Producto2</b></td>
<td>40</td>
</tr><tr>
<td><b>Producto3</b></td>
<td>30</td>
</tr><tr>
<td><b>Producto</b></td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
 
 
</div>
 
 
 
</div>
 
 
</div>
</body>
</html>

Gracias