Hola amigos!
Soy nuevo en el responsive design y me ha surgido un problema con un layout 2 columnas. Pasa que cuando redimensionas la ventana, la columna de la derecha se viene abajo de la columna de la izquierda demasiado rápido. Aquí tenéis un ejemplo de lo que os digo:
http://ho33.com/en/2columnlayout
Y el código fuente de esta página es el siguiente:
Código HTML:
<html>
<head>
<title>Two columns with float</title>
<style>
#head {
border: 3px double yellow;
}
#left {
float: left;
width: 200px;
border: 3px double green;
height:500px;
}
#right {
float: left;
width: 75%;
border: 3px double red;
}
#footer {
clear: both;
text-align: center;
border: 3px double blue;
}
</style>
</head>
<body>
<div id = "head">
<h1>Two Columns with Float</h1>
</div>
<div id = "left">
<h2>Left Column</h2>
</div>
<div id = "right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo. Donec nibh lectus, vulputate a aliquet quis, sollicitudin eget metus. Nullam quis tellus nibh. Praesent fermentum risus sit amet turpis eleifend dapibus. Duis tellus leo, tempor sit amet ultricies viverra, mollis at quam. Suspendisse hendrerit sagittis risus nec faucibus. Nam urna magna, porta vitae tincidunt sit amet, blandit eget diam. Vivamus a ornare augue. Vivamus sapien sem, facilisis vitae molestie eget, tempus ut augue. Sed suscipit facilisis mi, eu laoreet est gravida eu. Nulla et arcu quam, pellentesque adipiscing felis. Nam pretium augue sed sapien malesuada tempor. Nulla facilisi. Donec eu tempor mi. Sed congue dolor risus, et ornare massa. Nulla sodales aliquet iaculis. Quisque ullamcorper posuere magna non imperdiet. Fusce egestas arcu sit amet orci volutpat venenatis. Proin laoreet leo quis nulla iaculis id tincidunt arcu laoreet. Cras non ante felis, at pulvinar arcu. Vivamus porta sollicitudin massa congue elementum. Proin fringilla massa vel mi ultricies et molestie justo dapibus. Mauris elit orci, euismod non sodales ac, gravida eget mauris. Pellentesque accumsan ipsum ut elit tempus ut egestas diam molestie. Quisque in justo vitae metus volutpat consequat. Phasellus ac quam eu diam sodales congue vel at dolor. Nam scelerisque pellentesque pharetra. Curabitur nibh nisl, porta sed tristique id, convallis vitae ante. Nam volutpat nisl vitae lectus mattis tempus. Integer imperdiet bibendum ornare. In ultricies, tellus eget fermentum dapibus, massa eros adipiscing sapien, ac eleifend mi quam quis leo. Integer porttitor gravida condimentum. Nunc massa purus, iaculis sed scelerisque a, rhoncus nec mi. Nulla sollicitudin, turpis a aliquet porttitor, mauris justo pharetra lacus, sit amet tristique dolor arcu in eros. Proin nibh ligula, condimentum eu feugiat ut, sagittis condimentum orci. Etiam non ipsum ac metus fermentum laoreet. Vivamus sed lectus ut tortor vulputate adipiscing vitae quis justo. Quisque ac pulvinar libero. Donec dui sem, venenatis laoreet eleifend quis, vestibulum in diam.
</div>
<div id = "footer">
<h3>Footer</h3>
</div>
</body>
</html>