Pasar de table a div display:table*

dinoandy0072 · #1 (**permalink**) 21/10/2014, 04:42

Nose si sea posible de lograr; ya que he buscado mucho tiempo y aún no soluciono esto. Por favor ayuda.

Deseo pasar el table a div; porque he leído que no se debe usar table para "maquetar" las páginas; sino los divs, pero no logro el rowspan con los div.

No solo busco la solución para este código, también una breve explicación si no se les hace mucha molestia; para que no sea el único en aprender

.

Código HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <title>
      ¡Bienvenidos a Nice Roms!
    </title>
    <link href='https://dl.dropbox.com/s/lvy7350unsv32hv/stylesheet.css' rel='stylesheet' type='text/css'/>
  </head>
  <body>
      <div id='encabezado'>
        <table>
          <tr>
            <td rowspan='3'><img class='img-logo'/></td>
            <td class='cell cell-fecha'>Fecha</td>
          </tr>
          <tr>
            <td class='cell cell-top'>Top</td>
          </tr>
          <tr>
            <td class='cell cell-rep'>Rep</td>
          </tr>
        </table>
      </div>
      <div id='contenido'>
        2
      </div>
      <div id='pie_de_pag'>
        3
      </div>
    </body>
  </html>

Si necesitan algún otro recurso me avisan:

GeekGirl · #2 (**permalink**) 21/10/2014, 06:58

Simplemente tenés que crear un div con el ancho que quieras que ocupe esa imagen y flotarlo a la izquierda con float: left. Flotá también el resto de los otros div a la izquierda, y deberían mostrarse sin problemas como querés.

Código HTML:

<style type="text/css">
    #imgDiv{
        float: left; 
        width: 20%; 
        height: 170px; 
        background-color: black;
    }

    .rightDivs{
        float: left; 
        width: 80%; 
        background-color: red; 
        margin-bottom: 10px; 
        height: 50px;
    }
</style>
<div id="imgDiv">
    <img src="tuImagen.jpg" alt="" />
</div>
<div class="rightDiv">Fecha</div>
<div class="rightDiv">Top</div>
<div class="rightDiv">Rep</div>

En el ejemplo puse unos colores de fondo para diferenciar, y al div de la imagen le di un alto fijo para que ocupe el espacio necesario para que los otros divs se floten a su costado. La flotación te permite colocar los elementos uno junto al otro como necesitas en este caso. Hay infinidad de otras opciones, documentate.

Saludos :)

dinoandy0072 · #3 (**permalink**) 23/10/2014, 12:38

Lo había leído; pero olvidé responder, voy a intentarlo muchísimas gracias :D

dinoandy0072 · #4 (**permalink**) 09/11/2014, 03:03

Pasa lo que suponía..
Cuando le introduzco la imagen, se pierde las proporciones al cambiar las dimensiones del navegador (responsive design)

De hecho estoy trabajando con bootstrap ahora.
Busco que la imagen pueda cambiar de tamaño y los 3 divs vayan con él proporcionalmente, como ocurre con el rowspan en una tabla.