Cómo colocar dos elementos uno al lado del otro usando CSS

Solución:

Solo usa el estilo flotador. Coloque su iframe de google map en una clase div y el párrafo en otra clase div, luego aplique los siguientes estilos CSS a esas clases div (no olvide borrar los bloques después del efecto flotante, para no hacer que los bloques tengan problemas debajo de ellos) :

css

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

html

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>

Tienes dos opciones, ya sea float:left o display:inline-block.

Ambos métodos tienen sus salvedades. Parece que display:inline-block es más común hoy en día, ya que evita algunos de los problemas de flotación.

Lea este artículo http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ o este http://www.vanseodesign.com/css/inline-blocks/ para una discusión más detallada.

Ninguna de estas soluciones parece funcionar si aumenta la cantidad de texto para que sea más grande que el ancho del contenedor principal, el elemento de la derecha aún se mueve debajo del de la izquierda en lugar de permanecer junto a él. Para solucionar esto, puede aplicar este estilo al elemento de la izquierda:

position: absolute;
width: 50px;

Y aplique este estilo al elemento correcto:

margin-left: 50px;

Solo asegúrese de que el margen izquierdo del elemento derecho sea mayor o igual que el ancho del elemento izquierdo. No se necesitan atributos flotantes ni de otro tipo. Sugeriría envolver estos elementos en un div con el estilo:

display: inline-block;

Es posible que no sea necesario aplicar este estilo dependiendo de los elementos circundantes.

Violín: http://jsfiddle.net/2b0bqqse/

Puede ver que el texto de la derecha es más alto que el elemento de la izquierda delineado en negro. Si elimina el posicionamiento absoluto y el margen y en su lugar usa float como otros han sugerido, el texto a la derecha se desplegará debajo del elemento a la izquierda

Violín: http://jsfiddle.net/qrx78u20/

---

---

Utiliza Nuestro Buscador