Foros del Web » Creando para Internet » CSS »

Ayuda para poner una tercera columna

Estas en el tema de Ayuda para poner una tercera columna en el foro de CSS en Foros del Web. Tenía un diseño hecho con 3 columnas, pero intentando cambiar el diseño del menú de la izquierda, el de la derecha se me ha montado ...
  #1 (permalink)  
Antiguo 17/07/2009, 13:47
 
Fecha de Ingreso: julio-2009
Mensajes: 14
Antigüedad: 8 años, 5 meses
Puntos: 0
Ayuda para poner una tercera columna

Tenía un diseño hecho con 3 columnas, pero intentando cambiar el diseño del menú de la izquierda, el de la derecha se me ha montado encima del del medio :S

Código:
BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background:url(fondochulo2.jpeg);
    background-attachment:fixed;
    
}
#contenedor{
    text-align: left;
    width: 770px;
    margin: auto;
    margin-top:100px;
    filter: alpha(opacity=50);
    opacity: .9;
    
  
    
   
       
}
#cabecera{
    
    
    font-size:12pt;
    font-weight: bold;
    padding: 3 3 3 10px;
    filter: alpha(opacity=50);
    opacity: .5;
    background:url(disseny3.png);
   
    
    
    
    
}
#cuerpo{
    margin: 10 0 10 0px;
    
}
#lateral{
   
 float:left;  
 width:110px;  
 background-color:#4d7986;  
 padding:10px;  
}  
    
 .menu_top_bg  
 {  
 width:113px;  
 background:url(menutop.gif) repeat-x;  
 height:22px;  
 padding-top:8px;  
 font-family:Verdana, Arial, Helvetica, sans-serif;  
 font-size:12px;  
 color:#FFFFFF;  
 font-weight:bold;  
 text-align:center;  
 margin-bottom:1px;  
 }  

 .sub_menu ul  
 {  
 padding:0px;  
 margin:0px;  
 }  


 .sub_menu ul li  
 {  
 font-family:Arial, Helvetica, sans-serif;  
 font-size:11px;  
 color:#FFFFFF;  
 line-height:32px;  
 border-bottom:1px dotted #93bcc3;  
 list-style-type:none;  
 text-indent:8px;  
 }  
    

 .sub_menu ul li a  
 {  
 text-decoration:none;  
 color:#FFFFFF;  
 }  



 .sub_menu ul li a.selected  
 {  
 background:url(selected.png) no-repeat;  
 float:left;  
 width:115px;  
 height:32px;  
 }  


 .sub_menu ul li a:hover  
 {  
 background:url(selected.png) no-repeat;  
 float:left;  
 width:115px;  
 height:32px;  
 }  










}


#otrolado{
    
    width: 135px;
    float: right;
    background-color:#ffffff;
    -moz-border-radius: 5px;
    margin-right:5px;
}
     

#principal{
    margin-left: 150px;
    background-color: #ffffff;
    padding: 4 4 2 4px;
    width: 465px;
    -moz-border-radius: 2px 10px 20px 2px;
    
    
}




#principal2{
    
    width: 465px;
    

}

#pie{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
    -moz-border-radius:0px 0px 5px 5px;
    margin-left: 5px;
    margin-right: 5px;
} 






.degradado[class] {
background-image:url(degradado.png);
}

h1{
font-size:14px;
font-family:serif;

}


h2{

font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;

}
Os dejo el código aquí a ver si sabeis cuál es la solución :S
Ayuda porfavor T_T


el div que me queda montado encima es el div id="otrolado".
  #2 (permalink)  
Antiguo 20/07/2009, 00:52
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Ayuda para poner una tercera columna

Hola amigo, intenta usar esta sintaxis en tu codigo, saludos!

CSS
Código HTML:
<style>
#columnaprincipal {
position:relative;
width:100%;
height:auto;
}
#columnassecundarias {
float:left;
width:33%;
height:auto;
margin:2em 2em 2em 2em;
padding:2em 2em 2em 2em;
}
</style> 
Columnas
Código HTML:
<div id="columnaprincipal">

<div id="columnassecundarias">
Mi columna 1
</div>

<div id="columnassecundarias">
Mi columna dos
</div>

<div id="columnassecundarias">
Mi columna tres
</div>

</div> 
ahi lo tienes, saludos!
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #3 (permalink)  
Antiguo 30/07/2009, 00:14
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ayuda para poner una tercera columna

Otro modo seria usar el ancho (width) que tu quieras y usar para las tres columnas la propiedad float:left;

Se flotaria una a la izquerda de la otra mientras encuentre lugar, de no encontrar lugar saltaria a la linea de abajo por lo que debes tener presente que el ancho de tu columna esta dado por width + padding-right y/o padding-left.

Saludos
Es decir, si das un padding este se suma al width modificandote el ancho de la columna
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 00:29.