Sidebar de ancho fijo en diseño flexible

Desde que renové el diseño de Mandelrot he recibido un par de mensajes de colegas bloggers preguntándome cómo había hecho para hacer que el contenido se "estire" hasta abarcar toda la ventana, y sin embargo la sidebar (la barra que ven a la derecha, donde tenemos los enlaces a nuestros otros blogs) tenga un ancho fijo; si no saben a qué me refiero cambien el tamaño de la ventana de su navegador y entenderán lo que quiero decir. Como no sé si tendré que seguir respondiendo más veces lo mismo, y además este tema no lo he visto explicado en ninguna parte, intentaré explicarlo lo más sencillamente posible -dentro de que es un tema totalmente técnico, para gente que ya sabe algo de esto- y si tienen dudas les recomiendo que pregunten a los maestros en el arte de hacer fácil lo difícil: Vagabundia, El Escaparate, La Bloguería... Hay muchos y ellos les podrán ayudar mucho mejor que yo.


Este concepto tiene ventajas importantes para el diseñador: si el monitor del lector tiene mucha resolución, no desperdicias espacio inútilmente; pero si la ventana de su navegador tiene menos espacio que lo que tú hayas establecido (si sólo usas valores absolutos, no porcentajes) tu lector no se va a perder un trozo o toda la sidebar, que para los que tienen publicidad es importante que sea vista. Esto además de que es incómodo tener que estar desplazándose a la derecha cada vez que uno quiere verla o hacer click en algún punto sobre ella... El espacio web es muy valioso, igual que sería absurdo que algunos canales de televisión no ocuparan toda la pantalla del televisor independientemente del tamaño que tenga cada uno -o que parte de la imagen no cupiera- creo que si tenemos la opción de adaptarnos a nuestros lectores nos lo agradecerán.

Vamos allá. La idea es sencillísima, se trata de que tanto el bloque del main como el de la sidebar no tengan atributos float sino position:absolute; no das parámetros verticales (con lo que se ajustarán al header colocándose debajo) pero sí horizontales, y -aquí está el truco- como puedes darle parámetros "left" y "right" lo que haces es que al main le quitas el parámetro del ancho -así que no tiene uno definido-, y por el lado donde tengas la sidebar (una o varias), le dices que la distancia de ese lado sea lo que ocupe la sidebar mas los márgenes.

Por ejemplo: imagínense que tengo sólo una sidebar a la derecha de 200 píxeles, con un margen de 20 hasta el borde, y quiero dejar otros 20 en medio de los dos bloques; y en el margen de la izquierda del main quiero otros 20 píxeles. Pues voy y le digo que el main-wrapper (el "cajón" donde va el contenido del main) sea...

position: absolute

y añado...

left: 20px (para dejar el margen a la izquierda)

y después...

right: 240px (margen derecho + sidebar + margen entre los dos bloques)

Para repetirlo más claramente, sería borrar el ancho del main-wrapper y después sustituir la frase donde está el "float: left;" por esto:

position: absolute; left: 20px; right: 240px;

¡Y ya está! Como en un position:absolute no tienes por qué declarar un ancho concreto, y sí puedes especificar dónde van a estar los márgenes con respecto a los bordes de la ventana, en la práctica estás obligando al navegador a dibujar la web colocando esos márgenes y colocando el resto variable dependiendo de lo que abarque la ventana. Fácil, ¿verdad? Con esto puedes poner todas las barras que quieras y dejarlas fijas (o variables) también, simplemente dejando los márgenes de cada bloque donde quieras con la position:absolute. En realidad tuve que darle muchas vueltas al asunto porque no encontré ayudas en ninguna parte -había buenas ideas, muchas páginas las usan, pero funcionaban para unos navegadores y otros no-, pero cuando dí con ello no pude creer cómo había sido tan descuidado como para no darme cuenta antes. Supongo que estas cosas pasan... En fin, como verán ya está hecho y, pecando de inmodestia, ha quedado muy bien. :-D

Actualización: ¿qué hago si tengo problemas con mi web?

Después de publicar esta entrada me ha pasado varias veces la misma situación: contactan conmigo diseñadores o bloggers preguntándome por dudas sobre sus páginas... que no tengo ni idea de cómo resolver. Desgraciadamente yo no me dedico al diseño, y todo lo que sé es lo que yo iba necesitando -y para ello aprendiendo- para mi página... Pero sí les voy a dar lo que yo creo que es el mejor consejo posible y que creo que podrá ayudarles en general.

Con quien tienen que contactar es con los que sí son diseñadores y saben de esto de verdad, por eso tienen blogs de ayuda, y son los que ya cité al principio de esta entrada (hay más muy buenos, éstos son sólo los que yo conocí cuando les pedí ayuda para mí). Pero es muy importante no ya que les escriban con sus preguntas, sino la información que les den con sus preguntas; esto es lo que tienen que decirles:

1) Cuál es su nivel de conocimientos (no es lo mismo explicarle algo a alguien que no sabe lo que es una plantilla o qué diferencia hay entre HTML y CSS que a un experto).
2) Cuál es su plantilla original y qué modificaciones les han hecho (¿partieron de una Rounders? ¿Denim? ¿La hicieron ustedes desde cero?); si quien les va a ayudar conoce más o menos cómo está estructurada le será más fácil encontrar lo que tiene que buscar.
3) Deben adjuntar una copia de su plantilla para que el "profesor" pueda saber exactamente cómo es el código que hay y qué hay que cambiar para conseguir lo que quieren.
4) Cuál es el resultado que persiguen. Les parecerá una tontería, pero a veces damos por hecho que el otro nos lee la mente y le decimos "se ve mal" pero no especificamos si queremos este elemento aquí o allá, si las dos sidebars van juntas a un lado o cada una a uno...
5) Qué han hecho hasta ahora para tratar de conseguirlo y dónde se han atascado. Nota: más de una vez he visto gente que hace preguntas que se podrían averiguar simplemente buscando en Google durante dos minutos pero no se molestan lo más mínimo pensando "que me lo resuelva éste"; no es extraño que su respuesta sea "busca en Google".
6) Agradecimiento. Sí, el tipo que te va a ayudar lo hace porque él quiere, no es un esclavo a tu servicio (se sorprenderían de la actitud de más de uno por ahí).

En fin, si se toman la molestia de ponérselo fácil a quien les va a responder tendrán muchas más posibilidades de que lo haga, y además se ahorrarán que después les pregunte lo mismo que les acabo de escribir yo.

¡Suerte y no se desanimen, lo conseguirán!