Soy un poco novato y me ha surgido un error creando una web. La idea es crear una web con una cabecera y un menú lateral fijos. El caso es que el menú lateral se superpone con la cabecera habiéndoles puesto float:left y clear:both a ambos. He probado a ir cambiando position:fixed a absolute y a poner clear:both pero tampoco me da resultado.[![Así se ve ahora la web (la tengo en local, no está subida a Internet)][1]][1] Dejo el código: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .top { top: 0; left: 0; right: 0; width: 100%; height: 64px; box-shadow: 0 0 5px 0 rgba(0,0,0,.35); position: fixed; float: left; display: block; } .logo { height: 32px; width: 32px; padding: 15px; float: left; } .titulo { float: left; } .cd-modal-action img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } .cuerporec { display: block; clear: both; } .sidebar { float: left; position: fixed; clear: both; margin-top: 58px; width: 255px; box-shadow: 0 0 5px 0 rgba(0,0,0,.35); height:100%; display: block; left: 0px; color: #5b5b5b; } .sidebar a { height: 23px; color: grey; display: block; padding: 12px; text-decoration: none; line-height: 48px; border-top: 1px solid rgba(0,0,0,0.08); clear: both; } .sidebar a:hover { color: #ff6d00; background-color: #edf0f2; } .sidebar a:active { color: #ff6d00; } .sidebar p { font: 500 13px Roboto,sans-serif; text-transform: uppercase; float: left; padding: 0px 5px; } .alrededor { /*margin: 60px 10px 10px 255px;*/ float: right; background-color: grey; } h2 { color: #444; font: bold 18px 'Roboto',sans-serif; } h1, h2, h3, h4, h5, h6, p { font-family: 'Roboto', sans-serif; padding: 10px; margin-top: 7px; } h1 { font-size: 25px; color: black; max-height: 60px; } /*ICONOS*/ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; float: left; padding: 0 10px; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } /*FIN ICONOS*/ <!-- language: lang-html --> <!DOCTYPE html> <html class="no-js" lang="es-ES" prefix="og: http://ogp.me/ns#"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" > <title>prueba</title> <meta name="description" content="hola" /> <link rel='stylesheet' id='cv' href='file:///C:/Users/Javier/Desktop/cv%20analytics/cv.css' type='text/css' media='all' /> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'> <script src="file:///C:/Users/Javier/Desktop/cv%20analytics/modernizr.js"></script> <!-- Modernizr --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="top"> <div class="logo"> <img src="file:///C:/Users/Javier/Desktop/cv%20analytics/img/ic_analytics.svg"> </div> <div class="titulo"> <h1>prueba</h1> </div> </div> <div class="sidebar"> <div id="nav"> <div class="cuerporec"> <a href="#"><i class="material-icons">home</i> <p>Página principal</p></a> <a href="#"><i class="material-icons">work</i> <p>asdfa</p></a> <a href="#"><i class="material-icons">school</i> <p>asdfafa</p></a> <a href="#"><i class="material-icons">language</i> <p>asdfa</p></a> <a href="#"><i class="material-icons">build</i> <p>dfdfafa</p></a> <a href="#"><i class="material-icons">flag</i> <p>asdfaa</p></a> <a href="#"><i class="material-icons">email</i></a> </div> </div> </div> <div class="alrededor"> aa </div> </body> </html> <!-- end snippet --> Se me colapsan todos los divs, no lo entiendo. Igual es un error tonto, pero no me doy cuenta, ¿alguien me puede ayudar? [1]: https://i.sstatic.net/RuLuh.png