[SOLUCIONADO] Contenido de dos div's horizontales

[mblascog]

Buenas,
Me estoy peleando con un tema y no lo consigo.
Me gustaría hacer como una tabla con dos columnas y el texto alineado, verticalmente, arriba. Pero en lugar de usar tablas html, lo quiero hacer con div's y css.
En una columna sólo hay texto y en la otro incluyo un mapa con diseño adaptable y no hay manera de entender porqué el mapa me sale con una altura de 19píxeles, tal como puede verse en la siguiente imagen:



Alguna sugerencia por favor? Gracias

El código html es el siguiente:

Código HTML:

<section>
        <article>
            <div id="espaiContacte">
                <div id=col1>
                    Texto .....
                </div>
                <div id="col2">
                    <iframe src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664&amp;output=embed"></iframe>
                    <p><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664"><?php echo $mapa[$idioma] ?></a></small>
                </div>
            </div>
        </article>
        <footer>
            <?php include("includes/inc_peu.php") ?>
        </footer>   
    </section>
 

Y el código css:

Código CSS:

#espaiContacte{
    width:100%;
    background:#FFF;
}
#col1{float:left;
      width:50%
}
#col2{
    float:right;
    width:50%
}
#col2 {
    position:relative;
    height:0;
    overflow:hidden;
}
#col2 iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:450px;
    max-height:350px;
}
#col2 a{text-decoration:none;
    color:#000;
    text-align:center;
    font: bold 1.2em/1.0 'Century Gothic';
    width:100%;
}
 

[pzin]

Tienes un párrafo sin cerrar.

Si quieres imitar el comportamiento de tablas y celdas, usa display: table y display: table-cell.

Además, estás indicando que #col2 tenga una altura de cero.

[mblascog]

Gracias pzin,
- Párrafo sin cerrar te refieres a poner </p> después de small?:

Código HTML:

<div id="col2">
                    <iframe src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664&amp;output=embed"></iframe>
                    <p><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664"><?php echo $mapa[$idioma] ?></a></small></p>
                </div>
 

En cuanto a indicar height = 0 en col2, es el código que me he descargado para hacer el mapa responsive. Si lo elimino no pasa nada.

Ya he usado display:table, display:table-row y display:table-cell pero consigo lo mismo:

Código HTML:

<article>
            <div id="espaiContacte">
                <div id="filaContacte">
                    <div id=col1>
                        <?php echo $contacte[$idioma]; ?>
                    </div>
                    <div id="col2">
                        <iframe src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664&amp;output=embed"></iframe>
                        <p><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664"><?php echo $mapa[$idioma] ?></a></small></p>
                    </div>
                </div>
            </div>
        </article>
 

Y el código css:

Código CSS:

#espaiContacte{
    display:table;
    width:100%;
}
#filaContacte{
    display:table-row;
}
#col1{
    display:table-cell;
    float:left;
    width:50%;
}
#col2{
    display:table-cell;
    float:right;
    width:50%;
}
#col2 {
    position:relative;
    height:0;
    overflow:hidden;
}
#col2 iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:450px;
    max-height:350px;
}
#col2 a{text-decoration:none;
    color:#000;
    text-align:center;
    font: bold 1.2em/1.0 'Century Gothic';
    width:100%;
}
 

[pzin]

Cuando flotas un elemento, el display es computado automáticamente como block, anulando cualquier otro valor de ese atributo.

[mblascog]

Gracias pzin,
He cambiado el float por align.

[mblascog]

Buenas,
Me falla un pequeño detalle,la altura de las celdas es de 238píxeles. Porqué no es lo que ocupa el mapa, que debería ocupar 350píxeles?

Gracias.

Código CSS:

#espaiContacte{
    display:table;
    width:100%;
    height:100%;
}
#filaContacte{
    display:table-row;
}
#col1{
    display:table-cell;
    align:left;
    vertical-align:top;
    width:50%;
}
#col2{
    display:table-cell;
    align:right;
    width:50%;
}
#col2{
    position:relative;
    height:0;
    overflow:hidden
}
#col2 iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:450px;
    max-height:350px;
}
#col2 a{
    text-decoration:none;
    color:#000;
    text-align:center;
    font: bold 1.2em/1.0 'Century Gothic';
    width:100%;
}
 

Queda así:


Gracias.

[pzin]

Iniciado por mblascog

He cambiado el float por align.

No existe eso en CSS. Quítalo. No hace falta que flotes nada, ya que el comportamiento de esos elementos son los de una celda.

Iniciado por mblascog

Me falla un pequeño detalle,la altura de las celdas es de 238píxeles. Porqué no es lo que ocupa el mapa, que debería ocupar 350píxeles?

He probado tu código y la altura del mapa siempre dependerá del contenido de la celda de la izquierda, ¿cuál es el problema?

[mblascog]

Gracias pzin, pero justo lo que quiero es que la altura del mapa marque la altura de las celdas.
La celda de la derecha siempre será menos alta, pero ya me está bien.

[mblascog]

Gracias pzin,
Dices que align no existe en CSS, pero si quiero alinear el texto de la celda de la izquierda a la izquierda, y el de la derecha a la derecha, cómo se hace?

[pzin]

Con text-align.

Deberías mirarte algún manual de CSS. En librosweb.es alguno hay.

[mblascog]

Buenas,
Fue un fallo, quería decir text-align en lugar de align.

He conseguido que el mapa de google sea responsive, pero no consigo que los horarios y dirección queden a la izquierda y el mapa a la derecha.

He probado todo, cuando consigo que salga el horario a la derecha y el mapa a la izquierda luego el mapa no es responsive.

Ya no sé que más hacer, si me sugeris algo, estaré agradecida.
Se puede ver el ejemplo aquí

Gracias.

El codigo css es este:

Código CSS:

section article div#contenidorContacte{
    max-width:560px;
    margin:0 auto;
    text-align:left;
}
section article div#espaiContacte{position:relative;
    margin:0 auto;
    height:0px;
    width:100%;
    padding-top:56.25%
}
section article div#espaiContacte iframe {position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
 

Y el código html:

Código HTML:

<section>
        <article>
            <div id="contenidorContacte">
                <?php echo $contacte[$idioma];?>
                <div id="espaiContacte">
                    <iframe src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664&amp;output=embed" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                    <br/><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=rifos,+13,+sabadell&amp;aq=&amp;sll=41.779505,1.746826&amp;sspn=3.350703,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Passatge+dels+Rif%C3%B3s,+13,+08203+Sabadell,+Barcelona&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=41.532617,2.117664"><?php echo $mapa[$idioma] ?></a></small>
                </div>
            </div>
        </article>
        <footer>
            <?php include("includes/inc_peu.php") ?>
        </footer>   
    </section>
 

[Zeromm]

Toda la info de contacto metela dentro de un div y le pones un float: left (acuerdate de ponerle un ancho).... y al mapa le metes tambien un float: left con un ancho que sumado al ancho del div que añadiste no sean más grandes que su contenedor.

[mblascog]

Gracias pzin, he hecho lo que me has dicho, pero hay algo que me fastidia el alto de article. El fondo de la información i del mapa, tiene que ser gris claro. El gris oscuro es el color del footer. Así queda:



Dejo un ejemplo aquí

[mblascog]

Ya he visto lo que pasaba. Al final lo he incluido absolutamente todo dentro de un div, y problema resuelto