[SOLUCIONADO] como colocar div al lado del otro

[tonieet]

hola a todos! me gustaría saber por que no puedo colocar un div al lado de otro, tengo un div contenedor que contiene otros dos divs , la suma de estos dos divs es mas pequeño que el contenedor principal que contiene estos dos divs..

no se supone que si tengo un div en el lado derecho, al poner un float right al otro, este ultimo debería subir arriba y colocarse al lado del otro que esta al lado izquierdo?

esto es lo que tengo

<div class="principal">
<div class="divuno"></div>
<div class="divdos"></div>
</div>


.principal{
height: 120px;
width: 300px;

}

.divuno{
height: 40px;
width: 40px;
}


.divdos{
height: 40px;
width: 70px;
float:right;
}

por que no sube el divdos al lado del divuno? si no tiene nada encima?

hay alguna manera de ponerlos uno al lado del otro sin tener que usar position relative /absolute?

gracias

[superweb360]

pon esto:

Código CSS:

.divuno{
height: 40px;
width: 40px;
float:left;
}
 
 
.divdos{
height: 40px;
width: 70px;
float:left;
}
 

y luego añade clear:both

Código HTML:

<div class="principal">
<div class="divuno"></div>
<div class="divdos"></div>
<div style="clear:both"></div>
</div>
 

[fede5426]

Si lo que querés es que estén pegados uno con otro, hace lo que te dijo superweb360, si en cambio lo querés es que uno este a la izquierda del principal y el otro a la derecha pero a la misma altura, usa float:left en el divuno y float:right en el divdos.

Ejemplo

Saludos

[pzin]

También puedes dejar el código CSS tal cual lo tienes y solo modificar el HTML moviendo el div hacia arriba:

Código HTML:

<div class="principal">
  <div class="divdos"></div>
  <div class="divuno"></div>
</div>
 

Porque realmente el CSS lo tienes bien.

[tonieet]

Iniciado por superweb360

pon esto:

Código CSS:

.divuno{
height: 40px;
width: 40px;
float:left;
}
 
 
.divdos{
height: 40px;
width: 70px;
float:left;
}
 

y luego añade clear:both

Código HTML:

<div class="principal">
<div class="divuno"></div>
<div class="divdos"></div>
<div style="clear:both"></div>
</div>
 

muchas gracias superweb360! con eso que me has dicho lo he solucionado, me puedes explicar que es lo que hace exactamente ese div clear:both? estoy buscando información y no encuentro ningun sitio que lo explique con claridad, gracias!

[superweb360]

Iniciado por tonieet

muchas gracias superweb360! con eso que me has dicho lo he solucionado, me puedes explicar que es lo que hace exactamente ese div clear:both? estoy buscando información y no encuentro ningun sitio que lo explique con claridad, gracias!

esto del clear:both se tiene que poner después del último elemento flotante. Así conseguiremos que los elementos siguientes no floten. Es importante que lo pongas siempre, de lo contrario la página web te quedará mal.

otra manera de hacer columnas es poner style="display:inline-block" en vez de style="float:left". Sin embargo, con inline-block no hace falta poner el clear:both. El clear:both sólo se pone cuando pones style="float:left" o style="float:right".

[tonieet]

ook! muchas gracias por todo superweb360! gracias a todos por vuestro tiempo!

un saludo!;)