Rompecabezas: columnas personalizadas con CSS ¿imposible?

Archivado
Hola a todos. Llevo desde ayer comiéndome el coco para hacer una división bastante sencilla de columnas con capas DIV. Igual es que se me escapa algo y es bastante sencillo.

La cosa es que la primera columna tiene que tener 200 píxeles, y la segunda se debe ajustar a lo que sobre de la pantalla, sea la resolución que sea. He estado usando las propiedades "float" y los "width" (100%, *) con más o menos éxito en IE y Firefox, pero nunca quedan igual. Sin embargo, con tablas, es facilísimo y sale exactamente igual en ambos navegadores.

<table width="100%">
  <tr>
    <td width="200" bgcolor="#008000">&nbsp;</td>
    <td width="*" bgcolor="#0000FF">&nbsp;</td>
  </tr>
</table>

¿Se puede hacer exactamente igual, con CSS?

El problema desaparece con maquetación a un ancho de píxeles fijo, pero quiero usarlo de tipo relativo por temas de accesibilidad.

Saludos
Mmm de CSS no controlo demasiado, pero yo creo que si le haces un float a la columna, y a la segunda le pones un margin (en el lado donde esté la columna del float) del tamaño de la columna 1, debería de funcionar.
Fox escribió:Mmm de CSS no controlo demasiado, pero yo creo que si le haces un float a la columna, y a la segunda le pones un margin (en el lado donde esté la columna del float) del tamaño de la columna 1, debería de funcionar.

Pues buena idea, no se me había ocurrido, pero pasa que en IE el efecto sale bien, pero en Firefox la pantalla se expande hacia la derecha.

<div style="width:200px; height:300px; background-color:green; float:left">menu</div>
<div style="width:100%; height:500px; background-color:blue; margin-left:200px">contenidos</div>

La verdad es que Firefox me encanta como navegador, pero para diseñar para él es bastante cojonero, a veces no entiendo su "lógica".
La culpa no es de firefox, está haciendo exáctamente lo que dicen los estándares. A la segunda capa le estás diciendo que tenga un ancho del 100%, y es un ancho del 100% lo que está poniendo, al ser una capa no comparte información con otras capas, no es como en una tabla. Es decir, es IE el que lo está haciendo como le da la gana. Seguramente lo verás igual que en firefox en otros navegadores decentes como opera.

En resumen, quita el width:100% de la segunda capa.

Por cierto, hace ya un año que no toco diseño web pero firefox era realmente bueno para maquetar con CSS gracias a la extensión webdeveloper: https://addons.mozilla.org/es-ES/firefox/addon/60

Entre otras cosillas, puedes tener la hoja de estilo en la barra lateral y modificarla y ver los cambios al vuelo, sin tener que abrir y guardar archivos y sin modificar el original.
Seguramente tienes razón, y sigue los estándares, pero en anchos relativos me parece más lógica la forma de dibujar de IE. Un 100% debería cogerse el máximo ancho disponible, no el 100% de la página sí o sí, como en este caso expandir la página a la derecha (cosa que no tiene mucho sentido). Me temo que para ciertas cosas tendré que volver a las tablas. Gracias por la info de ese plugin, lo probaré, pero no creo que sea la solución.
¿Has probado a quitar el width? ¿Queda mal en IE? No lo tengo para probarlo.

Estás mezclando anchos relativos con absolutos, por mucha lógica que le veas le estás diciendo que tenga un ancho del 100%, no que ocupe el resto. Si en ie te lo hace mal, prueba a ponerle width:auto, que debería de ser el valor por defecto.

"% Defines the width in % of the parent element's width"

http://www.w3schools.com/CSS/pr_dim_width.asp
Claro... XD no había probado con el valor "auto", así y con la idea de Fox se puede maquetar perfectamente.

Es que me parecía demasiado raro que no se pudiera hacer con las CSS, que todo el mundo las tiene como la niña de sus ojitos.

Cada día se aprende algo nuevo, gracias! [bye]
que se expande? es así, es el diseño este flexible que no recuerdo como se llama. Dale un tamaño fijo a la columna de la derecha y no se expandirá :P
La cosa es que tenía que usar un ancho relativo a la resolución, de ahí el rompecabezas, pero sin problema ahora, con los márgenes y el width en auto se puede hacer. [oki]
Dos consejos:

1) No maquetes con tablas, no es aconsejable

2) Usa términos relativos (anchura de la letra m: em; altura de la letra x; ex...) no pixeles.

¿Te vale este?

<html>
   <head>
      <style type="text/css">
         div
         {
            padding: 1em;
         }
         
         #izquierda
         {
            background-color: #FF0000;
            height: 50ex;            
            width: 20em;
            float: left;
         }
         
         #derecha
         {
            background-color: #0000FF;
            height: 50ex;
            margin-left: 22em; /*20 + 1(paddding-left de izq) + 1 (paddding-right de izq)*/
         }
      </style>
   </head>
   
   <body>
      <div id="izquierda">Izquierda</div>
      <div id="derecha">Derecha</div>
   </body>
</html>


Saludos, de nada.
9 respuestas
Archivado
Volver a General