Maquetación 2 columnas CSS

themaz

Hola, tengo el siguiente problema y no se como resolverlo. Mi intención es hacer lo siguiente sin usar javascript, ya que con el si que consigo lo que quiero pero me gustaría hacerlo todo con CSS.

Lo que quiero es tener 2 columnas, donde la primera tiene un ancho fijo como de 200px y luego la otra tener un ancho 100% de página menos los 200px de la columna izquierda. ¿Como puedo conseguir esto ? he probado con márgenes negativos pero no me sale de ningún modo

RaymaN

http://jsfiddle.net/kBP6b/

3 respuestas
eXtreM3

La de la izquierda ponla fixed y la de la derecha flotante.

edit: bueno te he dicho fixed porque la última web que hice tenia el menú vertical fijo siempre a la izquierda (justo lo que planteas) y es lo primero que se me ha venido a la cabeza xD

Lo de #2 scrollea siempre, tenlo en cuenta ;)

1 respuesta
themaz

#3 si la pongo fija, que es lo que quiero, la de la derecha se va hacia la izquierda por debajo de esta :S

5 respuestas
eXtreM3

#4 ponle a la de la derecha

position: absolute; margin-left: 200px;
RaymaN

#4 pero no te funciona lo que he puesto en #2?

1 respuesta
Oboro

#1 #4 La capa fija que vaya primero en el código,luego en el css float:left o right depende de la posición

La capa que cambia el ancho debajo en código y en css no le des width, tan solo el margen de la otra capa (si está a la izq y mide 200px, pues margin-left:200px)

eXtreM3

#6 quiere que se quede fija, lo que has puesto funciona pero scrollea.

2 respuestas
Oboro

#8 Dónde pone que quiere que se quede fija? Yo solo leo ANCHO FIJO, no posición fija

1 respuesta
RaymaN

#8 que yo sepa solo ha indicado ancho fijo, no posición fija.

1 respuesta
LzO

#2 200px de margen izq en la columna derecha para que?

lo lógico es hacerlo asi

http://jsfiddle.net/kBP6b/3/

1 respuesta
eXtreM3

#9 #10 leed #4

2 respuestas
RaymaN

#11 el margen es para que la columna derecha no contenga a la izquierda. Si redimensionas la ventana con tu solución verás como ocurre esto.

#12 en #1 no dice nada de posición fija, y me da que en #4 sigue suponiendo que le hablas de ancho.

1 respuesta
Oboro

#12 La de la derecha se va para abajo pq no flota la capa de la izquierda, que es lo que quiere,eso que pone es pq no se sabe explicar, pero no pone que quiera posicionamiento fijo, lee #1

1 respuesta
eXtreM3

#13 #14 la que estáis liando xD, pone:

si la pongo fija, que es lo que quiero, la de la derecha se va hacia la izquierda por debajo de esta :S

en #5 se le da la solución a ese problema.

y en #2 la solución al problema general (lo cual está dicho en #3), no hay que darle más vueltas xd

themaz

mmm voy a poner más detallado lo que quiero a ver si se entiende mejor:

2 columnas,

  • columna izquierda: fija, vamos que baje el scroll y siempre se vea, con 100% de alto y 200px de ancho.

  • columna derecha: 100% alta, ancha 100% pero que que no haga scroll horizontal y que esta empiece al lado de la columna izquierda (esos 200px que tiene la izquierda). El problema que tengo es que esta acaba desplazándose a la derecha esos 200px que tiene la columna izquierda.

PD: Con javascript lo consigo pero no es lo que quiero. Calculo el ancho disponible, le resto esos 200px y luego aplico ese ancho a la columna derecha

2 respuestas
LzO

vale no lei #16

LzO

#16 toma http://jsfiddle.net/kBP6b/6/

1 respuesta
themaz

#18 salta el scroll horizontal, el vertical no me importa.

La columna derecha sale desplazada 200px a la derecha

1 respuesta
LzO

#19 pues acaso que venga un samaritano... yo que tu le iba dando al coco

http://www.w3schools.com/

palotex

http://jsfiddle.net/RgdSV/

1 respuesta
eXtreM3

Lo de #21 funciona, y si no quieres que scrollee verticalmente la columna de la izquierda (pero sí la de la derecha) le pones position:fixed.

Usuarios habituales

  • eXtreM3
  • palotex
  • LzO
  • themaz
  • Oboro
  • RaymaN