Ayuda para poner una tercera columna

[ftchamps]

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".

[iovan]

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!

[cristian_cena]

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