Foros del Web » Creando para Internet » CSS »

Divs que no aparecen en línea

Estas en el tema de Divs que no aparecen en línea en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/07/2011, 14:32
 
Fecha de Ingreso: febrero-2011
Mensajes: 11
Antigüedad: 6 años, 8 meses
Puntos: 0
Divs que no aparecen en línea

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?
  #2 (permalink)  
Antiguo 05/07/2011, 14:42
Avatar de afrika026  
Fecha de Ingreso: junio-2011
Mensajes: 84
Antigüedad: 6 años, 4 meses
Puntos: 19
Respuesta: Divs que no aparecen en línea

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...
  #3 (permalink)  
Antiguo 05/07/2011, 19:26
 
Fecha de Ingreso: febrero-2011
Mensajes: 11
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Divs que no aparecen en línea

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,

Etiquetas: ancho, divs, porcentual, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:47.