Posicionar dos divs debajo de dos tablas alineadas horizontalmente

neodani · #1 (**permalink**) 26/05/2009, 13:56

Holas!

No me acabado de salir con esto.
Tengo dos tablas posicionadas una al lado de la otra (eso bien) dos float:left
Pero cuando quiero posicionar sus respectivos paginadores debajo de cada tabla no hay manera.

La imagen que quiero conseguir es
http://www.cuelgalo.com/viewer.php?i...90_2tablas.PNG

Tengo un div que envuelve las dos tablas y sus paginadores, la estructura es la siguiente.

Código css:

Ver original<div class="tabla1 general">
<table id="mytable1" cellspacing="0" summary="Accesos Fallidos">
</table>
<div class="pagination">
</div>
<table id="mytable2" cellspacing="0" summary="Accesos General">
</table>
<div class="pagination">
</div>
</div>

Cómo lo puedo hacer? he jugado con el float en el paginador pero me lo pone arriba de la tabla 2, por lo que entiendo que a lo mejor se debe mostra la tabla 1 y dos y luego crear un div para los paginadores y alinearlos igual que las tablas? xD

Muchas gracias

hades87 · #2 (**permalink**) 26/05/2009, 14:03

Quizás este ejemplo te pueda venir bien, fijate en el código y dentro de cada div pon tu tabla sin ningún estilo, no debería darte problemas y te deberían quedar bien

kseso? · #3 (**permalink**) 26/05/2009, 14:13

¿los ".pagination" son los bloques azules de la imagen?
Si es así, puedes hacer de 2 formas que se coloque bajo su tabla respectiva, creando antes un contenedor para cada una de las tablas y su paginador que yo llamo ".bloque", al que sólo tendrás que definirlo como elemento en línea y quizás añadirle algún margen por estética:
Opción una:

Código html:

Ver original<div class="tabla1 general">
<div class="bloque">
<table id="mytable1" cellspacing="0" summary="Accesos Fallidos">
</table>
<div class="corte"></div>
<div class="pagination">
</div>
<div>
<div class="bloque">
<table id="mytable2" cellspacing="0" summary="Accesos General">
</table>
<div class="corte"></div>
<div class="pagination">
</div>
<div>
</div>

y en el css:

Código css:

Ver original.corte {clear: both;}

2ª Opción
Añade en tu css

Código css:

Ver original#mytable1, #mytable2 {clear: both;}

por cierto, no se si es error o realmente quieres hacerlo así (como no muestras el css...):

Código html:

Ver original<div class="tabla1 general">

¿quieres aplicar las dos clases a ese div o se te escapó un guión? (los identificadores no pueden contener espacios en blanco)

Un saludo

Mikmoro · #4 (**permalink**) 26/05/2009, 16:20

Hola, neodani. Cuánto tiempo sin verte.

Yo siguiendo la idea de kseso?, pero un poquillo simplificada, lo haría algo así:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<style type="text/css">
.bloque {float: left;
width: 40%;
}
table {width: 90%;}
.pagination {background-color: #33f;
width: 100px;
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="tabla1">
<div class="bloque">
<table id="mytable1" cellspacing="0" summary="Accesos Fallidos" border="1">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
<div class="pagination"></div>
</div>
<div class="bloque">
<table id="mytable2" cellspacing="0" summary="Accesos General" border="1">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
<div class="pagination"></div>
</div>
</div>
</body>
</html>

(meto unas celdas para que se vean las tablas)

neodani · #5 (**permalink**) 27/05/2009, 00:01

Cita:

Iniciado por Mikmoro

Hola, neodani. Cuánto tiempo sin verte.

Yo siguiendo la idea de kseso?, pero un poquillo simplificada, lo haría algo así:

(meto unas celdas para que se vean las tablas)

Buenas, antes de nada muchas gracias por las ideas.

He utilizado la base de Mikmoro funcionó a la perfección