estoy buscando la manera de hacer mi código aún más correcto en cuanto a semántica, y desde este punto de vista me frustra mucho el no poder escribir el código en el "orden real" y luego mostrarlo de la forma que me interesa. Creo que es un caso de estudio interesante, y como tal lo propongo a ver si tenéis alguna solución o entre todos la conseguimos. Éste es mi ejemplo:
Tengo un div con información de prioridad 1 (llamado column1), el contenido de la sección (column2, prioridad 2) y finalmente información complementaria (column3, prioridad 3).
Código :
<body> <div id="column1">column 1</div> <div id="column2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce rutrum ipsum sed ligula. Sed sit amet nisl. Mauris commodo aliquam pede. Ut eu lorem. Donec condimentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Mauris orci leo, sodales in, luctus quis, feugiat nec, lorem. Mauris varius, nisl in vulputate aliquam, lacus nisl fermentum tortor, sit amet fringilla augue libero aliquam felis. Pellentesque a pede. Fusce enim libero, suscipit volutpat, sagittis at, dignissim id, leo. Integer congue magna nec risus. Integer consectetuer, dui consectetuer ullamcorper rutrum, massa massa suscipit mi, non egestas sem nisi id libero. Etiam sed ligula ac est tincidunt ultrices. Mauris ligula. Donec lorem velit, varius in, mollis vel, eleifend non, dolor. Aenean venenatis auctor mauris. Maecenas ac ipsum non ipsum blandit egestas.</p> <p>Quisque sodales aliquet enim. Duis imperdiet pretium augue. Donec facilisis faucibus odio. Duis scelerisque lacus sed lacus. Nunc sagittis urna id ante. Curabitur velit justo, dapibus tempus, sollicitudin sed, placerat sit amet, ligula. Maecenas tempor venenatis nisl. Suspendisse tincidunt venenatis dolor. Praesent dictum. Phasellus pulvinar justo at orci. In hac habitasse platea dictumst. Nam sollicitudin metus at neque. In vestibulum tempus leo. Ut pharetra mi vel tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p> <p>Ut lorem. Suspendisse viverra scelerisque pede. Proin felis libero, vestibulum ut, fermentum venenatis, tincidunt id, nisl. Praesent luctus. Cras ornare, pede et vehicula placerat, libero mi lobortis nisi, eget luctus lorem purus in nunc. Nam pellentesque, turpis ac venenatis feugiat, diam orci blandit tortor, vel tempor lorem est aliquam ligula. Phasellus bibendum justo venenatis massa. Fusce arcu velit, consectetuer sed, lacinia non, rutrum vitae, lectus. Nunc dictum dapibus leo. In rutrum vestibulum quam. Ut iaculis. Pellentesque risus augue, fermentum vitae, pellentesque nec, pretium eu, ante. Mauris ac eros eu nibh pharetra egestas. Donec at lacus eget leo molestie varius. Vivamus cursus varius lorem. Pellentesque varius. Pellentesque sit amet quam. Nullam semper, mi eget accumsan venenatis, libero elit hendrerit mi, ac fermentum mauris risus non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div id="column3">column 3</div> </body>
La cuestión es que quiero mostrar dicha información en columnas, pero de forma que las columnas 1 y 3 tengan ancho fijo y la columna 2 se adapte al ancho restante. Para ello no se me ocurre otra manera de hacerlo que no pase por cambiar el orden de las columnas 2 y 3 en el html (me parece que lo correcto es mostrar el html según el orden de prioridad, es decir, si desactivo las css, mi código debe leerse en el orden correcto) y que no obligue a usar posición absoluta u otras soluciones que hagan que mi diseño no sea fluido (los bloques deben empujarse entre ellos para colocarse en su lugar correcto, por ejemplo, el footer siempre tiene que estar debajo de la más larga de las tres columnas).
Es decir, este es el resultado que quiero lograr:
Código :
<!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="column2-Type" column2="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#column1 {
background: #99FF33;
float:left;
width:200px;
height:300px;
}
#column2 {
padding-left:200px;
margin-right:200px;
background:#66CCFF;
}
#column3 {
background:green;
width:200px;
float:right;
height:300px;
}
#footer {
clear:both;
background:#FFFF99;
}
-->
</style>
</head>
<body>
<div id="column1">column 1</div>
<div id="column3">column 3</div>
<div id="column2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce rutrum ipsum sed ligula. Sed sit amet nisl. Mauris commodo aliquam pede. Ut eu lorem. Donec condimentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Mauris orci leo, sodales in, luctus quis, feugiat nec, lorem. Mauris varius, nisl in vulputate aliquam, lacus nisl fermentum tortor, sit amet fringilla augue libero aliquam felis. Pellentesque a pede. Fusce enim libero, suscipit volutpat, sagittis at, dignissim id, leo. Integer congue magna nec risus. Integer consectetuer, dui consectetuer ullamcorper rutrum, massa massa suscipit mi, non egestas sem nisi id libero. Etiam sed ligula ac est tincidunt ultrices. Mauris ligula. Donec lorem velit, varius in, mollis vel, eleifend non, dolor. Aenean venenatis auctor mauris. Maecenas ac ipsum non ipsum blandit egestas.</p>
<p>Quisque sodales aliquet enim. Duis imperdiet pretium augue. Donec facilisis faucibus odio. Duis scelerisque lacus sed lacus. Nunc sagittis urna id ante. Curabitur velit justo, dapibus tempus, sollicitudin sed, placerat sit amet, ligula. Maecenas tempor venenatis nisl. Suspendisse tincidunt venenatis dolor. Praesent dictum. Phasellus pulvinar justo at orci. In hac habitasse platea dictumst. Nam sollicitudin metus at neque. In vestibulum tempus leo. Ut pharetra mi vel tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
<p>Ut lorem. Suspendisse viverra scelerisque pede. Proin felis libero, vestibulum ut, fermentum venenatis, tincidunt id, nisl. Praesent luctus. Cras ornare, pede et vehicula placerat, libero mi lobortis nisi, eget luctus lorem purus in nunc. Nam pellentesque, turpis ac venenatis feugiat, diam orci blandit tortor, vel tempor lorem est aliquam ligula. Phasellus bibendum justo venenatis massa. Fusce arcu velit, consectetuer sed, lacinia non, rutrum vitae, lectus. Nunc dictum dapibus leo. In rutrum vestibulum quam. Ut iaculis. Pellentesque risus augue, fermentum vitae, pellentesque nec, pretium eu, ante. Mauris ac eros eu nibh pharetra egestas. Donec at lacus eget leo molestie varius. Vivamus cursus varius lorem. Pellentesque varius. Pellentesque sit amet quam. Nullam semper, mi eget accumsan venenatis, libero elit hendrerit mi, ac fermentum mauris risus non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Quisque nec tellus. Vestibulum augue sem, tempus vitae, semper in, sodales in, est. Sed turpis felis, elementum sit amet, pretium ac, lacinia vitae, risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur suscipit placerat magna. Nulla enim nibh, euismod elementum, euismod pharetra, cursus a, ante. Proin varius pede et augue. Donec sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tellus ante, sagittis et, lobortis a, fermentum vitae, ligula. Mauris egestas ultricies lacus. Integer nunc dolor, egestas sollicitudin, venenatis id, facilisis at, lorem. Mauris laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean facilisis.</p>
<p>Aliquam fringilla, lorem sed egestas adipiscing, quam leo varius pede, sed tempus felis enim eu sem. Aenean vel justo. Morbi quis est quis sem hendrerit condimentum. Mauris arcu. Maecenas eleifend purus non ipsum. Duis vel urna. Morbi nunc mauris, tempor vel, volutpat at, pharetra id, nisi. Phasellus varius. Ut metus tellus, molestie quis, blandit et, dignissim a, dui. Morbi gravida. Vestibulum porta lacinia lectus. Ut mattis urna.</p>
</div>
<div id="footer">footer</div>
</body>
</html>Siento el rollazo que he soltado, pero me parece un tema interesante el hacer que las css sirvan al html y no al revés, y aún así conseguir los resultados deseados.
Gracias y un saludo.
