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!
diseño a dos columnas, una fija y otra variable 
