3 columnas CSS

[roma1979]

Hola gente!!!, les escribo porque hace rato que estoy buscando respuesta a este tema y no puedo encontrarla... probe varios consejos y ninguno se adapta exactamente a lo que quiero y, por otro lado, no suelen tener compatibilidad con ciertos navegadores.

Les explico: lo que necesito hacer es un sitio con 3 columnas en un contenedor con ancho fijo de 955px. Las columnas tendrian un ancho fijo pero, en este caso, no importa demasiado la medida de cada una. Lo que me esta complicando es que necesito que las tres tengan un 100% de alto. Es decir, que sea cual fuere la resolucion, mantengan ese 100% de alto.

Les paso una imagen como para que sea mas claro ( sitioamedida.com.ar/pic.jpg" ).

Si me pueden dar una mano con esto, se los agradeceria infinitamente!!!!!!!!!!

Saludos a todos y, desde ya gracias!!!.

[Mikmoro]

Hay varias formas de hacerlo, todas en función del caso concreto y lo que se quiere conseguir.

Mira a ver si este ejemplo de una de ellas te orienta de por dónde tirar (haz sólo caso al texto y el menú derecho "Desarrollo", que lo demás està todo en obras).

Si no te sirve, busca en el foro por "columnas equilibradas" que hay muchos hilos referente a eso.

[roma1979]

Antes que nada gracias por tu rapida respuesta!.
Te cuento que lo que veo en la pagina que me enviaste no me sirve para lo que quiero. Lo que necesito es un contenedor de 955px con 3 divs, una izquierda, una central y una derecha, cada una con un ancho especifico en pixels y que ocupen el 100% del alto de la pagina. Es decir, que el alto de adapte segun la resolucion que se use.
No necesito que cada columna se adapte al tamaño de la otra sino que las tres se adapten al de la ventana.
Estoy buscando por todos lados y no encuentro una respuesta certera, si podes guiarme te lo agradeceria ya que estoy intentando salir de las benditas tablas y me esta costando muchisimo!!!.
Nuevamente, mil gracias!

[kseso?]

Aquí tienes otro ejemplo de "falsas columnas" o "columnas equilibradas".
Como te dice Mikmoro, lo más importante es que tengas claro qué quieres conseguir (y que lo sepas transmitir)
Creo que lo que buscas es una estructura con pie siempre abajo. Busca en www.araudi.net algún ejemplo con ese título o en las faq's de css

Un saludo.

P.D.: bienvenido a fdw

[roma1979]

Disculpa si no fui clara pero me parecio serlo, sobre todo con la imagen que les envie, es bastante ilustrativa. Te lo vuelvo a explicar pero no tiene muchas vueltas...

- Un div contenedor (en mi caso de 955px pero no importa la medida mientas que sea en pixels).
- Dentro de ese div, tres divs mas:
- Una columna izquierda,
- Una columna central,
- Una columna derecha,
Las tres con un ancho fijo en pixels y el alto de cada una al 100% de la ventana.

No mencione pie de pagina ni encabezado, solo tres columnas en un contenedor que ocupen el 100% del alto de la ventana.

Se entiende???

[GidHarvey]

Hola Buenas Tardes roma1979.
Creo que lo que tu necesitas es esto http://www.kopfmackloss.com/columnas.html
si es eso aqui te pongo los codigos.

Bueno yo use los siguientes codigos:

Código HTML:

<div id="content">
<div id="col1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat.</div>
  <div id="col2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat.</div>
  <div id="col3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut  wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat.</div>
</div> 

Aqui el CSS

Código HTML:

* { margin:0; padding:0;}

.clear { clear:both;}

#content {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	height: 700px;
}
#content #col1 {
	float: left;
	width: 316px;
	background-color: #216378;
	margin: 0px;
	padding: 0px;
	height: 700%;
}
#content #col2 {
	float: left;
	width: 316px;
	height: 700%;
	background-color: #FC0;
	margin: 0px;
	padding: 0px;
}
#content #col3 {
	float: right;
	width: 316.7px;
	height: 700%;
	background-color: #9C0;
	margin: 0px;
	padding: 0px;
}

Si tiene algo de sobra disculpen lo hice rapidin

Espero que te ayude...

saludos ATTe Gidharvey

[kseso?]

Te lo vuelvo a explicar pero no tiene muchas vueltas...

A ver, señor Roma1979
¿No observó que mi comentario lo edité? Y que está tachado el enlace a una estructura de falsas columnas equilibradas? Que por cierto, es lo que su imagen nos transmitió a dos usuarios.
¿Tampoco advirtió que lo que dejé sin tachar (por añadido en la edición) fue uno de los nombres como se conocen esas estructuras ("pie abajo")?
¿Tampoco se ha molestado en pasar por la página que le enlacé donde hay algún ejemplo de ese tipo de estructura?
¿Y el hecho de que no mencionase usted ni pie ni encabezado significa que le hemos de dar el código exacto de lo que quiere?

Se entiende???

Para que vaya haciéndose una idea más ajustada: usted lo que necesita es una estructura (layout, tramoya, composición de cajas...) que por un lado ocupen el 100% de alto de la ventana y que simultáneamente todas ellas tengan la misma altura con independencia del contenido. Esto es: pie abajo y equilibradas.
Ahora pregunto yo: ¿Se entiende?

GidHarvey, creo que esa composición no se ajustará a todos los casos porque la caja principal tiene una altura definida (700px)

[GidHarvey]

Hola kseso?
si, ya vi que no se ajustara a todos los casos, mil disculpas si no te sirve, pero lo intente saludos.

PD: kseso? ayudame en el post del CSS slide porfavor :S

Un saludo

ATTe Gidharvey

[jomaruro]

Hola:

Quizá este enlace te ayude, solo tienes que adaptarle tú las medidas.

Saludos.

[Mikmoro]

Lo siento, no te había entendido. Lo hago sobre el ejemplo de GidHarvey, que no es correcto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>ejemplo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin:0; padding:0;}
html, body {height: 100%;}
#content {width: 950px;
margin: 0 auto;
height: 100%;
}
#content #col1, #content #col2, #content #col3{ float: left;
height: 100%;
}
#content #col1 {width: 316px;
background-color: #216378;
}
#content #col2 {width: 316px;
background-color: #FC0;
}
#content #col3 {width: 316.7px;
background-color: #9C0;
}
</style>
</head>
<body>
<div id="content">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
</body>
</html>

[roma1979]

Mikmoro, diste en la tecla!!!!!!!!!!!!!!!!, es exactamente lo que necesitaba. Infinitas gracias por ayudarme con tu conocimiento, realmente lo aprecio mucho!. Ojala sea correspondida tu ayuda por otros lados, seguro lo sera!!!. Mil y una gracias!.

Por otro lado agradezco a Gidharvey por el intento!, era algo similar a lo que necesitaba pero no exactamente. Igual, gracias por el tiempo.

Tambien gracias Jomaruro por el aporte!.

Kseso?, creo que no tenias el conocimiento y solo intenstaste hacer ver que yo no tenia el vocabulario exacto para expresar lo que necesitaba. Igualmente, creo que fue claro ya que otra persona lo pudo interpretar y logro resolver mi problema.
Mas alla de no haber podido ayudarme, igual agradezco el tiempo en responder.

Saludos y gracias a toda la gente con buena onda y dispuesta a ayudar!!!.

[kseso?]

Kseso?, creo que no tenias el conocimiento y solo intenstaste hacer ver...

Pues sí, seguramente será eso: lo mucho que me preocupa mi reputación e imagen aquí y lo que influyen en mi ego y economía

Nada, que me alegro doblemente: porque haya resuelto su duda y por el registro en el foro de persona tan perspicaz. Estamos de enhorabuena todos.

[jomaruro]

Hola:

Y sobre todo en la economía.

Saludos.

[Mikmoro]

Hola, roma1979.
Yo no entendí a la primera porque no imaginaba que fuera eso lo que buscabas, ya que me pareció que tenías ciertos conocimientos de HTML y CSS y en ese caso no sería lo que querías, porque la consulta era muy simple, de primeras lecciones de cualquier tutorial.

De la misma manera, me alegro de que te haya servido mi respuesta, aunque al tiempo he de decirte que tu opinión dirigida a kseso? ha sido bastante desacertada, incorrecta e innecesaria.
Es decir:

Iniciado por roma1979

Kseso?, creo que no tenias el conocimiento y solo intenstaste hacer ver que yo no tenia el vocabulario exacto para expresar lo que necesitaba.

Al margen de que te aseguro que kseso? tiene el conocimiento en la materia necesario para haber hecho el mismo trozo de código que yo (entre otras cosas porque como te he dicho es de "primer curso"), hay una cosa que debes tener en cuenta en este foro: las estrellas en el nombre de cada uno significan el agradecimineto de mucha gente a la que has prestado ayuda como en este caso a ti, lo que habla en primer lugar de los conocimientos de quien posee 11 estrellas, y en segundo lugar, de su entrega. Si él buscara la estúpida argucia de escudarse en una ambigua explicación para ocultar su falta de conocimientos, en primer lugar no sería una de las personas más "laureadas" del foro (por su propia ignorancia y por tan estúpida actitud), y por descontado: ¿no le hubiera resultado mucho más sencillo simplemente no responder, como se hace cuando no conoces una materia? Te aseguro que sí, y creo que no tiene un problema de autoestima como para llegar a ese punto

En fin, lo que era un final feliz se ha visto un tanto enturbiado por un pequeño despecho de principiante. Este discurso era igual de innecesario, pero me apetecía escribirlo, porque creo que ha sido un pequeño desliz que no te tomaremos en cuenta, sabiendo que eres novato y que no volverá a ocurrir

Saludos.

[roma1979]

Kseso?, te pido disculpas si te ofendi. Realmente recien empiezo a trabajar con capas y me complica un poco y me parecio que me habias respondido como si supiera del tema y te respondi de mala forma...
Mil perdones y gracias a vos y a todos los que estan aca dispuestos a ayudar!.

[Mikmoro]

roma1979: me alegro mucho de que hayas respondido así, en una actitud que te honra. Ójala mucho usuarios mostraran esa humildad. Muchas gracias. Nos veremos.

Mikel.

[kseso?]

10-4 Roma
No le des más importancia de la que tiene. Fue un malentendido mutuo sin mayor trascendencia ni importancia. Seguro que tendremos ocasiones en un futuro para reírnos de esta situación.
De todas formas, gracias por tus palabras, junto a mi pesar por contribuir sin querer a que las pronunciaras.

Un saludo.

[jomaruro]

Hola:

Perdón por la intromisión.

Iniciado por Mikmoro

hay una cosa que debes tener en cuenta en este foro: las estrellas en el nombre de cada uno significan el agradecimineto de mucha gente a la que has prestado ayuda

Pues yo no he ayudado tanto (ni tengo tantos conocimientos) como para tener las que tengo.

Saludos.