Problema para ubicar elementos en línea

[Rafa80]

Hola,

Estoy armando una página y en la misma tengo que poner los siguientes tres elementos de izquierda a derecha:

Elemento 1 (pronostico del tiempo)
Elemento 2 (banner)
Elemento 3 (tabla)

Esto tiene que estar ubicado arriba del menú horizontal que ya he creado. El diseño de los demás contenidos funciona bien, pero ubicar estos elementos con divs en la parte superior ha sido un dolor de cabeza.

Se me cambian de lugar, quedan uno debajo del otro, o la alineación central del banner no es la deseada.


Les paso el código HTML y el CSS.

Código HTML:

<div id="top">
<div id="weather">Elemento1</div>
<div id="banner">Elemento2</div>
<div id="box">Elemento3</div>
</div> 

CSS:

Código:

#top {
 float: left;
 width: 100%;

}

#weather {
 float: left;
 margin-top:15px;
 margin-left:33px;
}

#banner {
 float: left;
 margin-left:0;
}

#box {
 float: left;
 width: 4%;
}

Los dos primeros elementos me quedan juntos o el segundo no queda centrado como yo quiero. Todos tienen que estar al mismo nivel. Los tres elementos tienen que estar distribuidos uniformemente, pero no he logrado resolver este problema, por más que modifique atributos.

[marcosnc_08]

Por que no subes tu web a un host gratis para verla mas facilmente, asi sera mas facil ayudarte.

te dejo uno para que pruebes Aqui

Cuidate.

[opzina]

esto::??

Código PHP:

  #top { 
 width: 100%; 
 
} 
 
#weather { 
 float: left; 
} 
 
#banner { 
 float: left; 
 
} 
 
#box { 
 float: left; 
 
}  
   

[jomaruro]

Hola:

Creo que el problema lo tienes aquí (señalado en rojo):

#weather {
float: left;
margin-top:15px;
margin-left:33px;
}

El margin-top:15px solo lo tienes en el div weather, lo que hace que ese div te lo posicione 15px más abajo que los otros dos.

Saludos.