problemas con columnas en css

[CrepitantE]

La imagen de la izquierda representa lo que busco... y la derecha lo que obtengo.

Es decir, dentro de una capa meter dos capas mas, y que al final de la capa naranja le siga a la de color azuk.

El problema:
Las capas de color amarillo no se logran meter dentro de las naranjas, y si lo hacen (quitando los float:left) no se colocan en forma de columnas. Se que el problema esta en el codigo de las capas amarillas.

He buscado soluciones pero no las encuentro, aparentemente tengo todo bien,
por cierto solo falla en el firefox.

Aquì el codigo:
-----------------------------------------------------------------------------------------------------
HTML

Código PHP:

  <!-- La capa naranja -->
<div id="content">

<!-- Las Capas Amarillas -->
<div id="izquierda">Texto, texto (muchas veces)</div>
<div id="derecha">mas texto, y mas (escrito muchas veces)</div>

</div>

<!-- La capa azul -->
<div id="pie">Copyright Jaime 2008</div> 
   

CSS
El posible origen de mi error

Código HTML:

/* capa naranja */
#content
{
	margin: 0 auto;
	width: 742px;
	padding: 21px 9px;
	border: 1px solid #2065A0;
	border-top: 0px;
	border-bottom: 0px;
	background: #FFF;
}

/* capas amarillas */
#izquierda
{
background-color: #99A;
width: 40% ;
float: left;
}

#derecha
{
background-color: #CCF;
width: 40% ;
float: left;
}

/*PIE (capa azul) */
#pie
{
	margin: 0 auto;
	width: 740px;
	text-align: right;
	color: #FFFFFF;
	letter-spacing: 2px;
	background: #088db0 url('images/menu-background.jpg') repeat-x;
	border: 1px solid #000;
	font-family: helvetica, arial, verdana, tahoma, sans-serif; 
	padding: 3px 10px;
}

Les agradeceria enormemente su ayuda.

[Mikmoro]

Bueno, no es fácil. Con el código que muestras ni hay caja naranja, ni cajas amarillas, ni simulan columnas separadas entre sí, etc.
En fin, ue no se parece nada tu ejemplo visual a tu código.

Para evitar que el pie se ponga sobre las columnas, simplemente busca el final de la caja naranja (???), y añade un corte con <div class="corte"></div>, y ahora añade a tu css el selector:

.corte {clear: both;}

[CrepitantE]

Gracias por tu respuesta Mikmoro No funciona el codigo. Depronto la analogia con las cajas no sea la mejor opcion, yo pienso que es mejor colocar el codigo.

Formato zip:

Formato web:


He visto muchos codigos fuente pero no encuentro donde pueda estar el error.
Gracias por tu atencion.

[Mikmoro]

¿Qué significa exactamente "No funciona el codigo"?

Lo que te he puesto, si lo pones exactamente así y exactamente donde te he dicho hace que el pie deje de estar encima de los bloques de texto y vaya donde termina la caja naranja. Te lo garantizo.
Explícate mejor.

[Mikmoro]

He mirado tu código y no lo has puesto bien.

En primer lugar, para que las cajas estén dentro del contenedor tendrán que estar dentro del contenedor, y tú las tienes fuera de éste.

Haz que estén dentro de él, y cuando termina mete el div del corte, y el pie irá a su sitio.

Además has hecho que las columnas estén dentro del div del corte, porque lo has dejado abierto
<div id="content" class="corte">
que no es lo que yo te había puesto
<div class="corte"></div>

[Mikmoro]

Mira, para que no te vuelvas loco, hazlo así:

<div id="headercontainer">
<div id="header">

</div>
</div>

<div id="menucontainer">
<div id="menu">
<div id="navcontainer">
<ul id="navlist">
<li><a title="El génesis de la página" href="index.php">Inicio</a></li>
<li><a title="El mundo de lo teórico." href="docs.php">Documentos</a></li>
<li><a title="Medicina para tratar el estress." href="ocio.php">Ocio</a></li>
<li><a title="Herramientas múltiples." href="utilidades.php">Utilidades</a></li>
<li><a title="Todo lo que quieras comentar." href="comentar.php">Comentarios</a></li>
<li><a title="Comunícate conmigo." href="contacto.php">Contacto</a></li>
</ul>
</div>
</div>
</div>

<div id="content">
<h2>Letras Traducidas</h2>

<div id="izq">
Artista: Robbie Williams<br>
Album: Greatest Hits<br>
Canción: Let love be your energy<br><br>

Out of a million seeds<br>
Only the strongest one breathes<br>
You made a miracle mother<br>
I´ll make a man out of me<br>
<br>
Daddy where´s the sun gone from the sky?<br>
What did we do wrong, why did it die?<br>
And all the grown ups say ´sorry kids we got no reply´<br>
<br>
If you´re willing to change the world<br>
Let love be your energy<br>
I´ve got more than I need<br>
When your love shines down on me<br>
<br>
Every tear that you cry<br>
Will be replaced when you die<br>
Why don´t you love your brother?<br>
Are you out of your mind?<br>
<br>
Daddy where´s the sun gone from the sky?<br>
What did we do wrong, why did it die?<br>
And if you´ve got no love for me then I´ll say goodbye<br>
<br>
If you´re willing to change the world<br>
Let love be your energy<br>
I´ve got more than I need<br>
When your love shines down on me<br>
<br>
If you´re willing to change the world<br>
Let love be your energy<br>
I can´t contain how I feel<br>
When your love shines down on me<br>
<br>
Well if you want it come and make a stance<br>
So when it´s in your hands<br>
People show me love<br>
Well if you want it come and make a stance<br>
So when it´s in your hands<br>
People show me love<br>
<br>
If you´re willing to change the world<br>
Let love be your energy<br>
I got more than I need<br>
When your love shines down on me<br>
<br>
If you´re willing to change the world<br>
Let love be your energy<br>
I can´t contain how I feel<br>
When your love shines down on me<br>
</div>

<div id="der">
Artista: Evanescence<br>
Album: The Open Door<br>
Canción: Call me when you´re sober<br><br>

Don´t cry to me.<br>
If you loved me,<br>
You would be here with me.<br>
You want me,<br>
Come find me.<br>
Make up your mind.<br><br>

Should I let you fall?<br>
Lose it all?<br>
So maybe you can remember yourself.<br>
Can´t keep believing,<br>
We´re only deceiving ourselves .<br>
And I´m sick of the lie,<br>
And you´re too late.<br><br>

Don´t cry to me.<br>
If you loved me,<br>
You would be here with me.<br>
You want me,<br>
Come find me.<br>
Make up your mind.<br><br>

Couldn´t take the blame.<br>
Sick with shame.<br>
Must be exhausting to lose your own game.<br>
Selfishly hated,<br>
No wonder you´re jaded.<br>
You can´t play the victim this time,<br>
And you´re too late.<br><br>

Don´t cry to me.<br>
If you loved me,<br>
You would be here with me.<br>
You want me,<br>
Come find me.<br>
Make up your mind.<br><br>

You never call me when you´re sober.<br>
You only want it cause it´s over,<br>
It´s over.<br><br>

How could I have burned paradise?<br>
How could I - you were never mine.<br><br>

So don´t cry to me.<br>
If you loved me,<br>
You would be here with me.<br>
Don´t lie to me,<br>
Just get your things.<br>
I´ve made up your mind<br>
</div>

<div class="corte"></div>
</div>

<div id="footer">
CopyRIGHT © Jaime Castellar 2008 - All Right Reserved ®
</div>

[CrepitantE]

Muchisimas Gracias Mikmoro.
Funciona perfectamente el ultimo codigo que me distes, miraré a ver donde estuvo mi error y aprendere, esto me puso de cabeza.

Le agregare reputacion positiva...

[CrepitantE]

simplemente busca el final de la caja naranja (???)

Te entendi mal, pense que era al final (pero fuera). Vaya error el mio.

En primer lugar, para que las cajas estén dentro del contenedor tendrán que estar dentro del contenedor, y tú las tienes fuera de éste.

<div id="content" class="corte">

En medio del desespero empece a colocar la clase por todos lados, en izq, der, a cerrar divs para buscar solucionarlo de forma desesperada y todo esto me llevo a dañar el codigo.

Nuevamente gracias por vuestra ayuda.

[Mikmoro]

Sí, me dí cuenta de que el resultado final de donde lo habías puesto era por pura desesperación de probar cosas, por eso me he decidido a ponerte el código mejor que una extensa y compliacada explicación.

Me alegro de que te haya servido.

Hasta la vista.