Foros del Web » Creando para Internet » CSS »

problemas con columnas en css

Estas en el tema de problemas con columnas en css en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 10/09/2008, 22:06
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 4 meses
Puntos: 7
problemas con columnas en css



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">Textotexto (muchas veces)</div>
<
div id="derecha">mas textoy 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.
__________________
-
  #2 (permalink)  
Antiguo 11/09/2008, 02:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: problemas con columnas en css

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;}
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 11/09/2008, 11:52
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 4 meses
Puntos: 7
Respuesta: problemas con columnas en css

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

Última edición por CrepitantE; 23/10/2008 a las 21:01
  #4 (permalink)  
Antiguo 11/09/2008, 12:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: problemas con columnas en css

¿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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 11/09/2008, 12:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: problemas con columnas en css

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>
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 11/09/2008, 12:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: problemas con columnas en css

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

Cita:
<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>
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 11/09/2008, 14:12
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 4 meses
Puntos: 7
Respuesta: problemas con columnas en css

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...
__________________
-
  #8 (permalink)  
Antiguo 11/09/2008, 14:28
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 4 meses
Puntos: 7
Respuesta: problemas con columnas en css

Cita:
simplemente busca el final de la caja naranja (???)
Te entendi mal, pense que era al final (pero fuera). Vaya error el mio.

Cita:
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.
Cita:
<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.
__________________
-
  #9 (permalink)  
Antiguo 11/09/2008, 15:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: problemas con columnas en css

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.
__________________
Visita mi nueva web idplus.org
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 23:17.