Separación de 2 divs con contenido diferente en HTML

  • Autor Autor mickey3
  • Fecha de inicio Fecha de inicio

mickey3

Iota
SEO
Verificación en dos pasos activada
En esto del HTML he sido un autodidacta y tengo todo un poco verde.

El caso es que quiero separar dos divs ya que están un poco juntos. Uno contiene el código de Adsense y el otro 3 pequeñas imágenes con un poco de texto.

Los tengo definidos así:

<div style='float: left; margin: 10px; padding: 5px; text-align: left;'>
código de adsense
</div>
<div style='float: center; padding: 12px; text-align: left;'>
Las 3 pequeñas imágenes y el texto.
</div>

He probado de todo para separarlos un poco más pero no puedo :sorrow:

¿Qué es en lo que fallo o qué tendría que añadir para que se separarsen un poco más.

Los podéis ver aquí: Enlace eliminado

Posdata: ya he gugleado la duda y sigo en las mismas.
 
yo no se mucho mas pero creo que lo mejor tal vez es una tabla ya que creo que puedes tener problemas de visualiacion en algunos navegadores
 
Simplemente usa el padding-left:20px; o el número que quieras para el bloque de adsense y/o padding-right:20px; para el bloque de las imagenes.

O aumenta el ancho margin
 
Última edición:
HTML: 
<div style='float: left; margin: 10px; padding: 5px; text-align: left;'>
código de adsense
</div>
<br><br><br>
<div style='float: center; padding: 12px; text-align: left;'>
Las 3 pequeñas imágenes y el texto.
</div>
 
krusty72 dijo:
Simplemente usa el padding-left:20px; o el número que quieras para el bloque de adsense y/o padding-right:20px; para el bloque de las imagenes.

O aumenta el ancho margin
Hacer clic para expandir...
:grumpy: Ya lo he puesto y siguen igual
 
el segundo div también ponlo float:left;
 
krusty72 dijo:
el segundo div también ponlo float:left;
Hacer clic para expandir...

Magnífico :encouragement: Sospechaba que eran los floats pero no había probado esa opción. Muchas gracias caballero Krusti.

A todos los que habéis ayudado muchas gracias 😛8:
 
HTML: 
<div style='float: left; padding: 10px; text-align: left; background: blue;'>
código de adsense
</div>
<div style='float: left; margin: 0px 0px 0px 10px; padding: 10px; text-align: left; background: red;'>
Las 3 pequeñas imágenes y el texto.
</div>

Es la manera en que yo lo solucione, solo basta mover el valor del margen para el segundo div y listo, te dejo los divs con color para notar el efecto
 
Ahí te va, espero te sirva.
Le puse colores para que se distinga un div de otro, así como una separación entre ambos con margin de 5px.

Insertar CODE, HTML o PHP: 
<div style='float:left;text-align: left;background:blue;height:200px;with:300px;padding:5px;margin-right:5px;'>
código de adsense
</div>

<div style='float:left;text-align: left;background:#333;height:200px;width:300px;padding:5px;'>
Las 3 pequeñas imágenes y el texto.
</div>


Edito: Ups! se me adelantaron XD
 
Como te han dicho, el segundo tiene que estar alineado al left. Pero me gustaría explicarlo. El primero se alineará a la izquierda, y el segundo a continuación del primero, también a la izquierda. Siempre y cuando no pongamos un <br clear> después del primer div, lo que haría mover el segundo div debajo del primero.

Al segundo div se le añade un margin-left: Vpx, donde V es el valor de los píxeles. :encouragement:
 
Fantásticamente explicado, así voy entendiendo lo que hago, gracias
 
He visto el post algo tarde... pero aprovecho para comentar que tu web es muy interesante, entré para ver el issue y terminé viendo las curiosidades. Saludos.
 
y si queremos que quede centrado ambos bloques pero con la separacion antes descripta como seria?
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro