Tamaños de DIVs variados uno al lado del otro

[LuisCZ]

Hola a todos, primero quiero disculparme si no es aquí (dentro de css) que se resuelve esta duda que tengo. Estoy diseñando una pagina que posee un div alado de otro y a su vez debajo de ellos tengo un div (el pie de pagina). Todos ellos los estoy manejando a través de "position: relative;" y "float: left;" y "float: right;" según sea el caso. Todo hasta ahí bien... el problema está en que los contenidos tanto del div izquierdo como del derecho crecen dinamicamente según su contenido, el izquierdo trabaja perfectamente... el problema lo tengo con el div derecho, ya que este crece solo en el caso de que tenga contenido y solo relativo al tamaño de este.

Saludos y muchas gracias de antemano!

Html:

Código HTML:

<div style="width: 900px; height: auto;" id="cuerpoc">
  <div style="width: 900px; height: auto;" id="contbaruser">
    <div style="width: 350px; height: auto; color: #FFF;" id="baruserI" class="barrami">
      //contenido que crece dinamicamente con php
    </div>
    <div style="width: 550px; height: auto;" id="baruserD">
      //contenido que crece dinamicamente con php   
    </div>
  </div>
  <div style="width: 900px; height: 100px;" id="pie">
    //contenido del pie de pagina     
  </div>
</div> 

CSS:

Código HTML:

#cuerpoc {
	position: absolute;
	top: 180px;
	z-index: 1;
	/* scroller */
	scrollbar-arrow-color: #333333;
	scrollbar-base-color: #535151;
	scrollbar-dark-shadow-color: #535151;
	scrollbar-track-color: #333333;
	scrollbar-face-color: #535151;
	scrollbar-shadow-color: #535151;
	scrollbar-highlight-color: #535151;
}
#contbaruser {
	position: relative;
	float: left;
}
#baruserI {
	position: relative;
	float: left;
	background-color: #666;
}
#baruserD {
	position: relative;
	float: right;
	top: 295px;
	right: 0px;
	background-color: #FFF;
}
#pie {
	background-color: #535151;
	position: relative;
	font-size: 15px;
	color: #FFF;
	float: left;
}

[Triby]

Divs alados?... será que el ala del derecho es más pequeña que la del izquierdo?

De entrada, no veo la necesidad de posiciones (absolutas ni relativas) ni entiendo cuál es el problema, porque al final sólo mencionas que el div derecho cambia su altura de acuerdo al contenido (si es que lo hay) y, de hecho, así es como debe funcionar, a menos que especifiques una altura que no sea auto.

Jugando un poco al adivino, tal vez, si el div de la derecha no tiene contenido, entonces el pie quedará también a un lado del div izquierdo y no abajo como esperas; si es el caso, lo único que necesitas es "cancelar" los floats:

a) Crear un div específico debajo de tus divs izquiero y derecho
b) Agregar el estilo CSS a #pie para cancelar los floats

Ejemplo: #pie { clear:both; }

[LuisCZ]

Hola Triby, gracias por responder. Si, releyendo lo que escribí efectivamente no me explique bien... sorry. Voy a tratar de explicarme mejor, tengo dos div uno alado del otro y un tercero que hace la función de pie de página. Utilizo la posición relativa para que el pie de página se desplace hacia abajo según el contenido que posea el div de la izquierda o el de la derecha. Necesito que si el div de la izquierda posee mas contenido que el de la derecha este último se "autorellene" hasta llegar al pie de página y lo mismo ocurra si el caso es contrario.

[Triby]

Si lo único que necesitas es que el pie esté abajo, la solución es la que te sugerí en el mensaje anterior.

[pzin]

Alguien debería de apuntar por aquí al lado o donde sea que "alado" no existe.

Yo creo que lo que busca es más bien Faux Columns.

Aunque es un método antiguo sigue cumpliendo su propósito. Luego también tienes la opción de usar display: table-cell y esperemos que los de la W3C se decidan de una vez con flexbox y demás.

[Triby]

Sí, pzin, ya viendo un poco, tiene diferentes colores de fondo para las dos columnas (o eso creo), pero sigo sin ver la necesidad de posicionar si está flotando.

LuisCZ busca en www.araudi.net las opciones que tiene para columnas equilibradas, seguramente alguna te servirá.

[pzin]

Iniciado por Triby

pero sigo sin ver la necesidad de posicionar si está flotando.

Obviamente no tiene ninguna funcional real para este caso. Igual es un resquicio de versiones anteriores del código. Algo así tiene que ser.

[Triby]

Ahhmm... no estoy seguro, pero, cuando hablas de versiones anteriores (yo diría muuuy antiguas), tal vez lo dices por cosas como:

Código CSS:

/* scroller */
    scrollbar-arrow-color: #333333;
    scrollbar-base-color: #535151;
    scrollbar-dark-shadow-color: #535151;
    scrollbar-track-color: #333333;
    scrollbar-face-color: #535151;
    scrollbar-shadow-color: #535151;
    scrollbar-highlight-color: #535151;
 

[pzin]

No. Me refería a que igual lo puso, la posición relativa, por cualquier otra cosa antes de flotarlos o algo así.

Edito: bueno tampoco, porque lo razona sin razón luego. Bueno, da igual… El caso es que no hay necesidad como decías.

[LuisCZ]

Muchas gracias a ambos por responder, intentare con lo que me sugieren y no me comprometo a decirles como me va porque tal vez de aquí a mañana mi CPU este reventado contra una ventana

Gracias!