Problema con maqueta sin tablas (solo css)

Zetaman87 · #1 (**permalink**) 27/07/2010, 03:31

Acabo de iniciar un proyecto web nuevo y ya tengo problemas triviales que no me dejan continuar como días manda desde el principio.

He creado un maqueta web centrada sin tablas pero el div de navegación derecha "ha decidido" aparecer donde le sale de las joyas de la corona.

El código HTML es este:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <!-- meta -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <title>Cagüen la maquetación web, si yo soy programador, ostias</title>

    <!-- css -->
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/elements.css" rel="stylesheet" type="text/css" />
    <link href="css/menu.css" rel="stylesheet" type="text/css" />
    
    <!-- css inline -->
    
    <!-- scripts -->
    
    <!-- scripts inline -->

    
    <!-- Otros --> 
    <!--[if lt IE 8]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    <![endif]-->  
</head>
<body>   
    <div id="wrapper">
        <div id="container">
            <div id="header">header
            </div>
            
            <div id="content">
                <div id="leftnavigation">left navigation
                </div>
                
                <div id="centernavigation">
                    center navigation
                </div>
                
                <div id="rightnavigation">right navigation
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Y este es el css que uso para maquetar:

Código:

/* Maquetado */

#wrapper {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

#container {
	width: 980px;
	margin-left:auto;
	margin-right:auto;
	text-align: left;
}

#header {
	width: 100%;
	height: 150px;
	margin-bottom: 10px;
	text-align: left;
}

#content {
	width: 100%;
	height: 100%;
	height: 600px;
	text-align: left;
}

#leftnavigation
{
	float: left;
	width: 150px;
	height: 100%;
	margin-right: 10px;
}

#rightnavigation
{
	float: right;
	width: 200px;
	height: 100%;
	margin-left: 10px;
}

#centernavigation
{
	width: 610px;
	height: 100%;
	float: none;
}

Si lo ejecutan localmente verán que el div de navegación derecho aparece desplazado hacia abajo.

Si alguien descubre donde me equivoqué le daré mil gracias.

exxqizofrenicoo · #2 (**permalink**) 27/07/2010, 08:19

al centernavigation dale float left.