No consigo alinear divs

Masta90 · #1 (**permalink**) 01/07/2011, 03:54

Buenas, estoy intentando hacer un header que consta de varias capas, en una parte tengo 3 capas dentro de una misma, y deberían ir alineadas las 3, hay espacio de sobra pero no consigo alinearlas. he probado de todo, os pego el código a ver si alguien sabe porqué puede ser. Gracias.

Código:

body{width:960px;margin:0 auto;font-family:Verdana, Geneva, sans-serif}
#header{width:950px;height:200px;border:1px solid #a09f9f;padding:5px; color:#FFF}
#header img{border:0}
#header_logo{width:auto;float:left;margin:25px;}

#header_user{background-image:url(images/header_user_bg.png);width:420px;height:127px;float:right}
.header_user_icon{background-image:url(images/login_icon.png);repeat:0;height:97px;width:99px;margin-left:20px;margin-top:15px;float:left}
.header_user_form{margin-right:50px;margin-top:15px;font-size:13px;text-align:right;width:auto}
.header_user_form label{padding-right:10px;font-size:13px}
.header_user_form a{color:#fff;margin-top:15px}
.header_user_form_button{float:right}

Código HTML:

<body>
<div id="header">
<div id="header_logo"><a href="#"> <img src="images/logo.jpg" alt="Title" title="Title" /></a></div>
<div id="header_user"><div class="header_user_icon"></div>
<div class="header_user_form"><label for="user">e-mail</label><input type="text" /><br/><label for="pass">contraseña</label><input type="text" /><a href="#"> ¿Olvidó su contraseña? Pinche aquí</a><div class="header_user_form_button"><a href="#"><img src="images/login.png"></a></div></div>
</div>
</div>

<div id="topmenu"></div>

</body>

Masta90 · #2 (**permalink**) 01/07/2011, 07:15

Finalmente conseguí resolverlo, creo que el problema estaba en los margenes laterales y los floats.

Sanchy_com · #3 (**permalink**) 03/07/2011, 08:14

Si vas a poner elementos dentro de un contenedor(div) de un ancho concreto, siempre debes fijarte que el ancho (width + padding + margin) de todos los elementos sumados sea igual o menor al ancho del contenedor padre.

En estos casos a los contenedores hijos les diste 'width:auto' (nota: no es necesario especificarlo, es el "width" por defecto), y no tenes directo control de los anchos, sino que estos dependen a su vez de los elementos contenidos en ellos. En algun lugar tenes que especificar los anchos para tener el control, sino estas dependiendo de los valores por defecto que ponga cada navegador :o