Posicionamiento de los elementos

[kfh1992]

Buenos dias a todos,quiero comentar primero que estoy creando una estructura base para luego implantar el codigo php, sql de la bd.

Pero lo primero es lo primero

Me pasa que cuando se trata de situar los elementos uno al lado del otro no soy capaz.

http://www.subirimagenes.net/picture...280db6b34a.jpg

El codigo css es el siguiente

#content{
Width:1024px;
margin:0 auto 0 auto;
}
#perfil {
background-color:#00CC00;
height: 244px;
width: 324px;
margin: 10px;
}
#datos{
background-color:#FC0;
width:324px;
margin-left:10px;
}
#fotos {
margin-bottom:10px;
height:150px;
background-color:#FFFF00;
margin-left:344px;
width:680px;
}
#descripcion{
background-color:#3399FF;
width:680px;
margin-left:344px;
}
#menu {
margin-top:10px;
margin-left:344px;
width:680px;
background-color:#900;
}

La estructura del documento

<div id="content"> <div id="perfil"></div>

<div id="datos">
<p>Nombre,Apellidos</p>
<p>Vive en Granollers,Cataluña,España</p>
<p>De Granollers</p>
<p>&nbsp;</p>
</div>
<div id="fotos">Colocar aquí el contenido para id "fotos"</div>
<div id="descripcion">Colocar aquí el contenido para id "descripcion"</div>
<div id="menu">Colocar aquí el contenido para id "menu"</div>
</div>

Entonces lo k quiero es que datos se posicione debajo de perfil (color verde), y fotos,descripcion,menu suba hacia arriba,lo pregunto porque cuando comienzo a trabajar con floats,se descuadra todo.

[cristian_cena]

hola kfh1992 al parecer ya sabes en parte la respuesta, que es (dentro de css2) usar float:left/right; o bien display:inline-block;. Aunque tu problema parece estar en el orden en que declaras los elementos en el html, es decir, en el "flujo" que das a tu documento. El navegador renderiza los elementos del documento de izquierda a derecha y de arriba a abajo y así será salvo que saques de flujo las cajas (float, position, display). + info

Ejemplo: Si quieres que "fotos,descripcion,menu " suba "hacia arriba" o lo declaras primero en el html y trabajas con posicionamiento por defecto (static) o relativo y display:inline-block; (display:inline-block funciona de la misma forma que por ejemplo <strong> dentro de un <p>, o sea cajas de linea dentro de una caja de bloque, el funcionamiento es similar), o usas float. O lo declaras en otro lugar y luego lo posicionas con position:absolute.

Saludos.