2 columnas horizontales responsive

[WIитX]

Hola, estoy intentando hacer 2 columnas responsive pero seque no hay manera e probado creando una table y demás a ver si podes echarme una mano

Código (html4strict) [Seleccionar] Expandir

<div id="contenedor_contenido">
  <table class="table table-striped">
    <tr>
      <td class="left">
        <!-- COLUMNA IZQUIERDA !-->
          <div class="column1">
         
              <div class="titulo">
                Esto es un título de prueba
              </div>
             
              <div class="imagen_portada">
              </div>
              <div class="descarga">
              </div>
             
          </div>
      </td>

      <td class="derecha">
        <!-- COLUMNA DERECHA !-->
          <div class="column2-twitter">

          </div>
         
          <div class="twitter">
          </div>     
    </td>
  </tr>
</table>
</div>

Código (css) [Seleccionar] Expandir

.left {
  max-width: 860px;
  height: auto;
  background-color: rgb(255, 255, 255);
  margin-top: 20px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-top: 5px solid rgb(65, 185, 74);
  float: left;
  margin-right: 10px;
  color: #636161;
  border-left: 1px solid rgba(107, 107, 107, 0.11);
  border-right: 1px solid rgba(107, 107, 107, 0.11);
  border-bottom: 1px solid rgba(107, 107, 107, 0.11);
  margin-bottom: 20px;
}

.derecha {
  float: right;
  max-width: 310px;
  height: auto;
  background-color: white;
  margin-top: 20px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-top: 5px solid rgb(255, 90, 64);
  border-left: 1px solid rgba(107, 107, 107, 0.11);
  border-right: 1px solid rgba(107, 107, 107, 0.11);
  border-bottom: 1px solid rgba(107, 107, 107, 0.11);
  margin-bottom: 20px;
}

.column1 {
  max-width: 845px;
  color: #4e4e4e;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  text-align: justify;
}

Este es el código T.T a ver si podes ayudarme

|              HEADER           |

| columna 1 | | Columna 2|

[xiruko]

Hola, estás usando Bootstrap? Lo digo por lo de table table-striped...

Si es así, para hacer dos columnas que de tablet para abajo se vea una debajo de otra, simplemente haz esto:

Código (html5) [Seleccionar] Expandir

<div class="container">
   <div class="row">
      <div class="col-sm-6" id="columna_izquierda"></div>
      <div class="col-sm-6" id="columna_derecha"></div>
   </div>
</div>

Si no usas Bootstrap, deberás usar media queries para conseguir un comportamiento responsive. Siguiendo con el HTML que he puesto arriba, sería algo así:

Código (css) [Seleccionar] Expandir

div#columna_izquierda {
   float: left;
   width: 50%;
}
div#columna_derecha {
   float: right;
   width: 50%;
}
@media (max-width: 700px) {
   div#columna_izquierda,
   div#columna_derecha {
      float: none;
      width: 100%;
   }
}

Saludos!

[WIитX]

Hola, muchas gracias por su pronta respuesta!

Sí, uso boostrap e probado el código que me has pasado pero las columnas son 50% y 50% sin embargo yo quiero que la columna izquierda sea más ancha que la derecha, pero al mover los % la derecha se me baja abajo

Un saludo y gracias :S

[xiruko]

Hola,

Antes de nada deberías echarle un vistazo a la documentación oficial de Bootstrap... http://getbootstrap.com/css/#grid

Respecto a tu duda, para hacer la izquierda más ancha, deberás aumentar el valor de su clase sm a la vez que reduces el de la derecha. Recuerda que en una fila, las columnas siempre deben sumar 12.

Por ejemplo:

Código (html5) [Seleccionar] Expandir

<div class="container">
   <div class="row">
      <div class="col-sm-8" id="columna_izquierda"></div>
      <div class="col-sm-4" id="columna_derecha"></div>
   </div>
</div>

Saludos!

[gAb1]

Hola, no te recomiendo usar el float, es muy sucio y hay que estar usando hacks, y usarlo en cada elemento...

Yo uso flexbox y hace exactamente lo mismo, solo que no necesitas ir limpiando nada ni poner divs extras, simplemente se pone display inline-flex en el div padre (o flex si necesitas tener un absolute dentro) y todos los elementos que tengas dentro se alinean horizontalmente, dependiendo del ancho que tengan. Y para que no se amontonen usas flex-wrap: wrap y se reparten por filas (no más del 100% del ancho del padre en cada fila).

Respecto a bootstrap, no te recomiendo usar un framework entero, ya que seguramente no necesitarás ni la mitad de todo lo que tiene, lo único útil que les veo son el sistema de columnas, que simplemente son clases con un width %. Con eso y flexbox yo no necesito (de momento) usar frameworks.

Ahora, si solo estás haciendo pruebas y aprendiendo no hay ningún problema, me refiero para producción. O a menos que estés en un proyecto muy grande y la web va tener mil cosas y vás a usar practicamente todo lo que ofrece dicho framework, entonces si que vale la pena usarlo.


Edito: Si no me equivoco esto es lo que estabas buscando no? https://jsfiddle.net/y5x3jyc9/2/ Ni un solo float  

Código (html5) [Seleccionar] Expandir

<header>HEADER</header>
<main>
   <div class="left">Columna 1</div>
   <div class="right">Columna 2</div>
   <footer>Footer 2016</footer>
</main>

Código (css) [Seleccionar] Expandir

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

html,
body {
   width: 100%;
   height: 100%;
   text-align: center;
   margin: 0;
}

header {
   border: 1px solid grey;
   width: 100%;
   height: 15%;
   margin-bottom: 10px;
}

main {
   border: 1px solid grey;
   width: 100%;
   height: calc(85% - 10px);
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
}

.left {
   border: 1px solid grey;
   width: calc(70% - 10px);
   margin: 0 10px 10px 0;
}

.right {
   border: 1px solid grey;
   width: calc(30% - 10px);
   margin: 0 0 10px 10px;
}

footer {
   border: 1px solid grey;
   width: 100%;
   height: 15%;
}

Ahora sobre el tema del scroll, es algo muy facil, puedes ponerlo donde quieras, si quieres que se muestre el header siempre (sin tener que usar javascript) puedes ocultar el overflow en el body y mostrarlo solo en el main, de esta manera solo hace scroll este elemento: https://jsfiddle.net/y5x3jyc9/3/

Código (css) [Seleccionar] Expandir

html, body { overflow: hidden }

main { overflow-y: scroll }

O dejarlo normal: https://jsfiddle.net/y5x3jyc9/4/

A tu gusto