Foros del Web » Creando para Internet » CSS »

diseño a dos columnas, una fija y otra variable

Estas en el tema de diseño a dos columnas, una fija y otra variable en el foro de CSS en Foros del Web. Hola, no entiendo por qué motivo me sale mal el diseño de una página con dos columnas, la de la izquierda de ancho fijo y ...
  #1 (permalink)  
Antiguo 03/07/2007, 12:08
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Pregunta diseño a dos columnas, una fija y otra variable

Hola, no entiendo por qué motivo me sale mal el diseño de una página con dos columnas, la de la izquierda de ancho fijo y la derecha de ancho variable al tamaño del navegador.

En IE7 sale bien, pero en Firefox la columna derecha no la consigo colocar en su hueco y se me expande por debajo de la columna izquierda ocupando todo el ancho del contenedor (en este caso el propio body, aunque también pasa con cualquier DIV):

este es el CSS abreviado con las propiedades que hacen el diseño:

Código:
#cabecera {
	border-bottom: 1px solid black;
}
#colizq {
	float: left;
	width: 300px; /*ancho fijo */
	margin: 0;
	padding: 1em 10px 1em 10px;
	border-right: 1px solid black;
}
#colder {
	float:right;
	margin:0;
	padding: 1em 10px 1em 10px;
}
#pie {
	clear:both;
	padding-bottom: 1em;
	text-align:center;
	border-top: 1px solid black;
}
como decía, sale perfecto en IE7 pero en Firefox pasa lo que comentaba.

Alguna ayuda?
  #2 (permalink)  
Antiguo 03/07/2007, 16:52
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Re: diseño a dos columnas, una fija y otra variable

lo he medio solucionado. Ahora ya lo tengo colocado en su sitio. Símplemente no tenía que flotar la columna derecha (la columna de tamaño variable). Pero el problema que tengo ahora es que no se me aplican ni márgenes ni rellenos y el texto lo tengo pegado a su borde izquierdo.

Alguna ayuda?

ahora el CSS es así:

Código:
#cabecera {
	border-bottom: 1px solid black;
}
#colizq {
	float: left;
	width: 300px; /*ancho fijo */
	margin: 0;
	padding: 1em 10px 1em 10px;
	border-right: 1px solid black;
}
#colder {
	margin:1em 0 1em 0; /* no se por qué no se aplican margen ni relleno */
	padding: 1em 10px 1em 10px;
}
#pie {
	clear:both;
	padding-bottom: 1em;
	text-align:center;
	border-top: 1px solid black;
}
os pongo el documento HTML completo para que lo podais comprobar en seguida:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
body {
	margin: 0;
	padding:0;
	font-family:"Lucida Sans", Georgia, Tahoma, Garamond, sans-serif;
	/*width: 600px;*/
	border-right: 1px solid black;
}
#cabecera {
	background-color:#996600;
	border-bottom: 1px solid black;
}
#colizq {
	float: left;
	width: 300px;
	background-color:#FFFFCC;
	margin: 0;
	padding: 1em 10px 1em 10px;
	border-right: 1px solid black;
}
#colder {
	display:block;
	/*float:left;*/
	/*width: 259px;*/ /* pixeles restantes descontando anchos y rellenos restantes */
	margin:0 1em 0 1em;
	padding: 1em 10px 1em 10px;
}
h1, h2 {
	margin-top: 0;
	padding-top: 0;
}

#pie {
	clear:both;
	padding-bottom: 1em;
	text-align:center;
	border-top: 1px solid black;
	background-color:#CCCCCC;
}
-->
</style>
</head>

<body>
<div id="cabecera">
  <h1>Lorem ipsum dolor sit amet</h1>
</div>
<div id="colizq">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris consequat
    tempor enim. Curabitur rhoncus interdum felis. Etiam lobortis nibh quis neque.
    Fusce viverra aliquet ipsum. Duis turpis sem, pellentesque eget, consequat
    eu, convallis non, orci. Etiam varius. Fusce aliquam. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam
    metus velit, tincidunt in, egestas ac, nonummy eu, urna. Nulla justo. Ut
    tincidunt bibendum nulla. Vestibulum augue nisl, tristique id, auctor ut,
    sodales quis, ipsum. Vestibulum at turpis. Ut non orci in dui mollis rhoncus.
    Donec eros enim, lobortis sed, nonummy at, tempus a, erat. Quisque ultricies,
    dolor nec mattis hendrerit, magna mauris lacinia odio, eu nonummy nisi ligula
    id erat. </p>
  <p>Mauris tempus luctus augue. Nullam ac lacus. Vivamus at quam. Aliquam vel
    turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Nunc sed mi. Sed id felis sed velit suscipit mollis.
    Mauris vestibulum sollicitudin mauris. Praesent ut augue. Quisque ornare.
    Ut orci. Donec malesuada, ante lobortis tempor euismod, odio sem porttitor
    tellus, a eleifend magna arcu vitae nisl. Nulla elementum, magna ut vulputate
    pretium, mauris nisl iaculis augue, quis lobortis quam nisl ut eros. Nunc
    tempus mollis arcu. Nulla facilisi. Praesent interdum. Aliquam erat volutpat.
    Fusce id justo. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; </p>
</div>

<div id="colder">
  <h2>In nonummy lacus ac ante.</h2>
  <p> Praesent rutrum dapibus metus. Nam elementum elit. Vestibulum vitae nisl
    eu urna vestibulum varius. Curabitur ante elit, iaculis scelerisque, porta
    sit amet, gravida ut, nisi. Vivamus sodales nunc in dui. Vestibulum velit
    dolor, commodo at, viverra vitae, convallis non, felis. Pellentesque adipiscing
    adipiscing libero. Nulla turpis. Fusce tempus nisi a lacus. Vestibulum quis
    nibh sit amet tellus tincidunt laoreet. Morbi elementum arcu vitae neque.
    Cras pede ante, lacinia et, luctus id, adipiscing eu, ipsum. Nam lacinia
  risus vitae nisi. </p>
  <p>Quisque felis odio, dignissim vitae, dignissim fringilla, rutrum et, tellus.
    Vestibulum dapibus. Praesent suscipit molestie massa. Aenean consequat. Sed
    iaculis viverra orci. Curabitur vitae tellus a erat consequat facilisis.
    Proin euismod sodales enim. Fusce et metus quis enim pellentesque suscipit.
    Aenean dui. Vestibulum in neque. Suspendisse mollis. Nam et urna sed arcu
    tempus lobortis. Sed nisl nisl, aliquam ut, auctor eget, tempor sed, lacus.
    Sed scelerisque posuere massa. Etiam ac ligula ut nisi iaculis congue. Aliquam
    bibendum sapien in sem. Nunc mauris turpis, lobortis eu, adipiscing quis,
    porttitor nec, enim. Sed tincidunt justo nec risus. Vivamus lacus lacus,
    dapibus eget, vehicula a, venenatis dignissim, mi. </p>
</div>

<div id="pie">
	<p>Aliquam lacinia, lorem id bibendum auctor, eros nunc iaculis leo, ornare
    egestas sapien velit ut nisi. Nam ornare, dui a ultricies volutpat, lorem
    quam pellentesque urna, venenatis adipiscing magna lectus sit amet velit.</p>
</div>
</body>
</html> 
como nota solo decir que las propiedades CSS que se ven deshabilitadas entre comentarios eran las que cambiarían la columna derecha a un ancho fijo igual que la izquierda.

Una ayudita please!

Última edición por Tigervlc; 03/07/2007 a las 17:00
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 05:39.