Divs que no aparecen en línea

lavak00731 · #1 (**permalink**) 05/07/2011, 14:32

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?

afrika026 · #2 (**permalink**) 05/07/2011, 14:42

primero tene en cuenta que los divs que van en linea al tener un borde, éste ocupa unos pocos píxeles más fuera del div, por lo tanto al hacerlos al 33%, el tercer div no encaja en el espacio que queda por lo tanto te lo manda abajo. El problema son los bordes de los divs, solucionalo de la siguiente manera.

En vez de 33%, ponele 30% y andá probando, si ves que con el 30% te lo sigue mandando abajo entonces reducí los porcentajes hasta que encajen los 3.

Como acolación, te diría que además les pongas a cada div (los que van a ir en línea) una posicion relativa: position: relative

suerte...

lavak00731 · #3 (**permalink**) 05/07/2011, 19:26

Hola Africa026:

Muchísimas gracias por tu ayuda, funcionó. Mil gracias, no sabía de los bordes es para mí nuevo ese aspecto porque creí que cuando empezaba un elemento arrancaba otro.

Gracias por tu tiempo y tu atención, Un abrazo,