Problema con float left

Estoy haciendo un blog ya lo tengo muy avanzado, y arreglando cosas quise hacer BIEN la cuestion del float.
tengo el contenido a la izq, y tengo 1 div que se veria a la derecha del contenido.
y ahora lo quiero hacer con float left al contenido y no me sale me quedan separadas las 2 columnas:
arriba el contenido y abajo los menues. Les paso el codigo resumido asi no es quilombo
HTML

Código HTML :

<div id="contenido">
  aca esta el contenido
</div>
<div id="menuLateral">
    <div id="loguin">
    </div>
    <div id="categoria">
    </div>
</div>

CSS

Código :

#menuLateral{
   width:260px;
}
#loguin{
   background-color: #B4C5D1;
}
#categoria{
   font-size:12px;
   text-align:left;
   margin-top:20px;
}

Antes me habia salido bien pero en vez de poner float left al contenido le puse float right a los menues, y supongo que por esa razon cuando achicaba la ventana se me superponia los menues de la derecha con los del contenido, ya que siempre estaban pegados a la derecha.
si lo quiero hacer poniendo float:left al contenido tengo que poner float:right al otro div, osino no funciona, no entiendo porque no se acomoda solo con el primer float!.

Ambos tienen que tener float, no uno solo. Ambos tienen que estar flotados porque si no el que no lo este va a querer ocupar todo el ancho.

Por otro lado tienes que especificar los anchos de ambos divs:

Código :

//suponiendo que tu contenedor es de 900px
#contenido {
   float: left;
   width: 620px; //dejo 20 px de espacio entre uno y otro
}
#menuLateral{
   float: right;
   width:260px;
}
#loguin{
   background-color: #B4C5D1;
}
#categoria{
   font-size:12px;
   text-align:left;
   margin-top:20px;
}

Aparte, si haces eso, tendrías que poner algo para hacer clear a los floats:

Código HTML :

<div id="contenido"> 
  aca esta el contenido 
</div> 
<div id="menuLateral"> 
    <div id="loguin"> 
    </div> 
    <div id="categoria"> 
    </div> 
</div>
<div class="clear"></div>

Código :

 .clear { clear: both; } 

listo, al final le puse los 2 float, gracias
ahora me surgio un nuevo problema, cuando achico la ventana, el menu se me mete abajo del contenido, como hago para que se quede siempre en el mismo lugar?
y otra pregunta.. para ubicar el contenido mas en el centro me convendria usar position:relative, y ajustar la posicicion no?
gracias por tu tiempo.

luco escribió:

Eso depende de lo que estes haciendo (deberias poner un link o algo para ver, o al menos el codigo completo), de si usas medidas en pixeles o en porcentajes, etc.

luco escribió:

O_o "mas en el centro" es demasiado vago, mas en el centro de que?, cuanto es "mas"? repito, deberas poner un link o algo para saber que haces, y que quieres.

perdon ahora me puse de tu lado y me di cuenta que no me explique bien.
no tengo la pagina subida asique pongo una imagen para que tengas idea:

Problema1: como ves, el contenido quedo hacia la izquierda por usar float:left, quisiera centrarlo (que quede justo abajo de "blog de luco").







Problema2: cuando achico la ventana, el menu se me corre para abajo, como hago para que quede en el mismo lugar?.




este es todo mi archivo CSS:

Código :

@charset "utf-8";

body{
   background-color: #C4D5E1;
   font-family: verdana, Helvetica, sans-serif;
   text-align:center;
   
}
h3{
   border-bottom:solid 1px #aaaaaa;
}
h4{
   margin:0;
   padding-bottom:5px;
   padding-top:0;
}
#menu{
   position:absolute;
   right:0px;
}
#titulo{       
   width: 632px;
   margin-right:auto;
   margin-left:auto;
   text-align:center;
   margin-bottom:10px;

}
#contenido{
   width: 670px;
   background-color: #F4F4F4;
   padding: 15px;
   margin: 0 auto;
   text-align:left;
   float:left;

   
}
#menuLateral{
   float:right;
   width:260px;
}
#loguin{
   background-color: #B4C5D1;
}
#categoria{
   font-size:12px;
   text-align:left;
   margin-top:20px;
}
#post{
   background-color: #F4F4F4;
   margin-top:40px;
   margin-right:auto;
   margin-left:auto;
   text-align:left;
}
#comentario{
   background-color:#ffffff;
   padding:15px;
   margin-top:15px;
   margin-bottom:15px;
   border:solid 1px #A4B5C1;
}
#fecha{
   color: #3399bb;
   /*float:right;*/
   font-size:10px;

}
#lista{
   /*float:right;*/
}
.icono_user{
   position: relative;  
    display: block;  
    height:50px;  
    width: 250px;  
}
.icono_user cite{
   background: #111;  
    filter:alpha(opacity=25);  
    opacity:.25;  
    color: #fff;  
    position: absolute;  
    bottombottom: 0;  
    left: 0;  
    width: 240px;  
    padding: 10px;  
    border-top: 1px solid #999;  
}
.categoria{
   color: #93A4B0;
}
.linkOscuro{
   color: #8293A0;
}
.error{
   background-color:#D3FF99;
   width: 640px;
   padding: 15px;
   margin: 0 auto;
   text-align:left;
}
.opciones{
   border: solid 1px #A4B5C1;
   padding: 5px;
   /*
   border: solid 1px #D4E5F1;
   padding: 5px;
   background-color: #A4B5C1;
   */
}
li{
   padding: 10px;
   list-style: none;
   border-top: solid 1px #7394a0;
}
label{
   display:block;
}
input{
   border:solid 1px #A4B5C1;   
}
textarea{
   border:solid 1px #A4B5C1;   
}
select{
   border:solid 1px #A4B5C1;   
}
a{
   color: #A4B5C1;
}
a:hover{
   color: #3399bb;
}

no puse ningun valor con porcentaje, todo pixeles. lo que se me ocurre es hacer todo un contenedor para que este contenido dentro de un limite, pero para eso le tendria que dar una altura al contenedor, lo que no puedo porque el contenido del blog es relativo.

el codigo del html no te lo paso porque es mucho y no creo que el problema este ahi.
Gracias

Exactamente, necesitas un contenedor externo que te agrupe todo en el centro, y no, no tienes que darle una altura, para eso es el clear que te puse en el comentario anterior.

Ahora bien, el contenedor debera tener un ancho fijo que sea mayor a la suma de #contenido y #menulateral (o sea mas de 930px), si no siempre se va a ir hacia abajo el lateral porque no cabe.

También veo que tienes un #menu con position absolute, eso para que es?

ah listo ahora esta perfecto gracias!!! se ve igual en todos los navegadores menos IE que no probe.
lo del position absolute fue para ubicar eso que dice luco(administrador) cerrar sesion
queria que aparezca arriba pero sin que el titulo se baje, porque quedaba mucho espacio sino, aunque no se si es la mejor forma de hacerlo.