Problema con layout 2 columnas

moginn · #1 (**permalink**) 20/08/2014, 09:33

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>

juangemelo01 · #2 (**permalink**) 20/08/2014, 11:17

Amigo, el detalle es que no estan en la misma sintonia #izquierda y #Derecha

Código:

#left {
  		float: left;
  		width: 200px;
		border: 3px double green;
		height:500px;
	}
	#right {
  		float: left;
  		width: 75%;
  		border: 3px double red;
	}

ejemplo

tenemos el ancho de nuestra pagina que es igual a 800px
Derecha mide el 75% del tamaño del ancho de nuestra pagina (es igual a 600px)
izuqierda siempre mide 200px

sumando ambos nos da como resultado 800px

pero
¿que sucede cuando nuestra pagina sea menor a 800px?
ahora como ejemplo, nuestra pagina mide 600px

Derecha mide 450px
izquierda mide 200px
reultado 650px ouch

los elementos miden mas que nuestra venta, como son flotantes, el que flota a la izquierda se queda arriba y el que flota a la derecha se queda abajo

solucion:
trabaja con % a mano izquierda en dimenciones inferiores para que te del el 100%, si es necesario, reduce un poco el tamaño o haslo mas grande dependiendo de lo escalable que quieres que sea tu web

ojo, los bordes, y margenes tambien los tienes que considerar ya que si en puro ancho llegan a sumar el 100%, esos pixeles extras van a generar que se te caigan las cajas

considera que en vez de trabajar con el 100%, estas trabajando un 95%, es muy raro que por bordes y margenes se te rompa el diseño hasta que llegas al siguiente nivel adaptable

pzin · #3 (**permalink**) 22/08/2014, 08:21

Tal vez sería más aconsejable hacer que el elemento de la derecha tome lo que deje el otro. Puedes usar calc():

Código CSS:

Ver original#left, #right {
  box-sizing: border-box;
}
 
#left {
  float: left;
  width: 200px;
}
 
#right {
  float: left;
  width: calc(100% - 200px);
}

Otra forma de hacerlo sería no flotar el elemento de la derecha y asignarle un overflow:

Código CSS:

Ver original#left, #right {
  box-sizing: border-box;
}
 
#left {
  float: left;
  width: 200px;
}
 
#right {
  overflow: hidden;
}

box-sizing sirve para cambiar el modelo de caja de CSS, así rellenos y bordes formarán parte del tamaño del elemento, lo que se traduce en menos quebraderos de cabeza a la hora de calcular las cosas.