posicionamiento de tablas :S

[shembao]

Iniciado por Mikmoro

No entiendo esta frase.

bueno ... vamos a explicarnos por parte ...

en este momento se ve de la siguiente manera



el codigo es:

<div style="margin-left:20px;" >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption>
Flujo General Ingreso/Salida
</caption>
<tr >
<th width="39%" scope="col">Tipo Registro</th>
<th align="center" width="20%" scope="col">%</th>
<th align="center" width="25%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingresos</div></th>
<td align="right"><? echo porcentaje($total[0],$ingresos[0]) ?></td>
<td align="right"><? echo $ingresos[0] ?></td>
</tr>
<tr>
<th scope="row"><div align="left">Salidas</div></th>
<td align="right"><? echo porcentaje($total[0],$salidas[0]) ?></td>
<td align="right"><? echo $salidas[0] ?></td>
</tr>
<tr >
<th scope="row"><div align="left" class="Estilo1">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total[0],$total[0]) ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total[0] ?></span></td>
</tr>
</table>
</div>

/*** DOS ULTIMAS TABLAS ***/

<div >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<? $total_pais=0;
while($row=mysql_fetch_array($query)){
if($row['pais']=='Chile')
$nacional=$row['total'] ?>
<th scope="row"><div align="left"><? echo $row['pais']; ?></div></th>
<td align="right"><? echo porcentaje($total1[0],$row['total']); ?></td>
<td align="right"><? echo $row['total']; ?></td>
</tr>
<? } ?>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>

<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right"><? echo porcentaje($total1[0],$nacional); ?></td>
<td align="right"><? echo $nacional; ?></td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right"><? echo porcentaje($total1[0],$total1[0]-$nacional); ?></td>
<td align="right"><? echo $total1[0]-$nacional; ?></td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>
</div>

SIN embargo si en la segunda etiqueta div coloco class='alex'

se arregla y queda de la siguiente manera:




el codigo del css es:

/*
Grey Suits you Sir. Please host the images on your own server.
written by Stuart Colville http://www.muffinresearch.co.uk
*/


.alex table, .alex td
{
border : 1px solid #CCC;
border-collapse : collapse;
font : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
font:small
}
.alex table
{
float:left;
margin-left:20px;
border :1px solid #CCC;
}
table.seccion
{
margin-left:20px;
border :1px solid #CCC;
}
.alex thead th,
.alex tbody th
{
background : #FFF url(th_bck.gif) repeat-x;
color : #666;
padding : 5px 10px;
border-left : 1px solid #CCC;
}
.alex tbody th
{
background : #fafafb;
border-top : 1px solid #CCC;
font-weight : normal;
}
.alex tbody tr td
{
padding : 5px 10px;
color : #666;
}
.alex tbody tr:hover
{
background : #FFF url(tr_bck.gif) repeat;
}

.alex tbody tr:hover td
{
color : #454545;
}
.alex tfoot td,
.alex tfoot th
{
border-left : none;
border-top : 1px solid #CCC;
padding : 4px;
background : #FFF url(foot_bck.gif) repeat;
color : #666;
}
.alex caption
{
text-align : center;
font-size : 120%;
padding : 10px 0;
color : #666;
}
.alex table a:link
{
color : #666;
}
.alex table a:visited
{
color : #666;
}
.alex table a:hover
{
color : #003366;
text-decoration : none;
}
.alex table a:active
{
color : #003366;
}

como lo hago???

ya que si no le coloco <div class='alex'> queda como el primer dibujo ... .????

help!!!