Problema descuadre divs

gat · #1 (**permalink**) 03/05/2011, 08:53

Hola, tengo un esquema muy simple pero no funciona bien y, por mucho que lo intento, no consigo arreglarlo.
Al visualizar el código en firefox, los div RIGHTHEADER y REGISTRY salen debajo del logo en vez de a su derecha y el CONTENT aparece también con una altura muy pequeña.
Alguien es capaz de detectar el fallo o hacerme las correcciones que vea? es que es mi primer diseño y estoy un poco perdido.
GRACIAS (cualquier consejo será bien recibido)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head><body>



<div id="container">

	<div id="header">
		<div id="logo"><img src="images/logo_bonardi_varona.png"></div>
    	<div id="rightheader">rightheader</div>
        <div id="registry">registry</div>
        
	</div>
    
    <div id="content">
		<div id="left">content</div>
	</div>
    
    <div id="breadcrumbs">breadcrumbs</div>
    
	<div id="footer">
    	<div id="address">address</div>
        <div id="edigital">edigital</div>
	</div>
        
</div>




</body></html>

Código:

@charset "UTF-8";

* {margin:0; padding:0;}
/* reset styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
/* end reset styles */


body {background: url(images/bg_BonardiVarona.png) repeat-x}

	<!--left: 50%;
	margin-left: -100px /*hay que restar la mitad del ancho*/-->
	
#container {
	width: 925px;	
	height: 550px;
	margin: 0% auto auto auto;
	border:1px solid black;
}

#header {
	position: relative;
	width: 900px;
	height: 140px;
	margin: 0% auto auto auto;
	border: 1px solid black;
	overflow: hidden;
}

	#logo {	
		position: relative;
		width: 218px;
		height: 110px;	
		padding: 5px 0px 0px 0px;
		border: 1px solid black;
		float: left;
	}

	#rightheader {
		position: relative;
		width: 500px;
		height: 118px;
		padding: 5px 0px 0px 0px;
		border: 1px solid black;
		float: right;
		background: #F00;
					
		
	}
	
	#registry {		
		position: absolute;
		width: 10em;
		height: auto;
		padding: 5px;
		border: 1px solid black;
		background: #F00;
		right: 5%;
	}


#content {
	
	width: 900px;
	height: 350px;
	border: 1px solid black;
	background: #9F3;
	margin: auto;
	overflow: hidden;
}

#footer {
	margin: auto;
	width: 900px;
	height: 50px;
	border: 1px solid black;
}

	#address {
		float: left;
		margin: 0px;
		height: auto;
		padding: 5px 0px 0px 0px;
		float: left;
		background-color: #09F;
	}
	#edigital {
		float: right;
		height: auto;
		padding: 5px 0px 0px 0px;
		background-color: #09F;
	}

#breadcrumbs {
	position: absolute;
	width: 200px;
	height: auto;
	padding: 5px 0px 0px 0px;
	border: 1px solid black;
	background-color: #09F;
	left: 50%;
	margin-left: -100px /*hay que restar la mitad del ancho*/
	}

ZoroRoronoa · #2 (**permalink**) 03/05/2011, 10:26

agregas px, em, %, etc...
le das posiciones relativas y flotas uno a la derecha, otro a la izquierda y REGISTRY no lo flotas y le das una posicion absoluta.

salen con altura pequeña porque unno tiene una altura AUTO y otro la tiene de 118px.

De buena manera te recomendaria que pases por http://librosweb.es porque tienes muchos errores, o al menos no estas maquetando bien las cosas.

Saludos

gat · #3 (**permalink**) 05/05/2011, 02:58

Gracias por tu respuesta. Ya estoy liado con el link que me has dado y he resuelto casi todo.