Estoy maquetando un sitio y quiero que al final de una sección aparezcan 3 divs a modo de columnas con una información diferente. Por ello opté por usar ancho porcentual en los mismos. Lo que sucede es que dos divs me aparecen en linea y la tercer me aparece por debajo de la primera.
El Html
Código HTML:
<body>
<div id="contenedor">
<div id="slider"></div>
<div id="menubajoa">Content for id "menubajo1" Goes Here</div>
<div id="menubajob">Content for id "menubajob" Goes Here</div>
<div id="menubajoc">Content for id "menubajoc" Goes Here</div>
</div>
</div>
</body> Y ahora el CSS
@charset "utf-8";
#contenedor {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
background-color: #FFF;
text-align: justify;
text-indent: 15px;
word-spacing: normal;
padding: 5px;
clear: both;
float: left;
height: auto;
width: 100%;
border: 1px solid #79c471;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#slider {
background-color: #FFF;
clear: both;
float: left;
height: auto;
width: 100%;
border-bottom-width: medium;
border-top-style: none;
border-bottom-style: solid;
border-bottom-color: #79c471;
}
#menubajoa {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
clear: none;
float: left;
height: auto;
width: 33%;
border-right-width: thin;
border-right-style: dashed;
border-right-color: #79c471;
padding: 5px;
}
#menubajob {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
clear: none;
float: left;
height: auto;
width: 33%;
border-right-width: thin;
border-right-style: dashed;
border-right-color: #79c471;
padding: 5px;
}
#menubajoc {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
clear: none;
float: left;
height: auto;
width: 33%;
padding: 5px;
}
Que error cometo?