0

LAYOUT ACTUAL

Tengo un layout ya definido el cual consta de un contenedor(.container) que centra todo el contenido de la pagina, de las filas(.row) las cuales ayudan a crear divisiones horizontales dentro del contenedor y las columnas que ayudan a crear las divisiones verticales(.col) dentro de las filas. aquí el layout:

//utilizado para centrar todo el contenido de la pagina
.container() {
    margin-left:   auto;
    margin-right:  auto;
    width:         90%;
    max-width:     $container-max-width;
}

//Wrap de las subdivisiones del layout
.row{
    display:      flex;
    flex-wrap:    wrap;
    margin-right: -1rem;
    margin-left:  -1rem;
}

//divisiones del layout
.col{
    padding-left:  1rem;
    padding-right: 1rem; 
    flex:          none; // 0 0 auto
    width:         100%; //original del framework
}

//las divisiones van de 5 en 5 hasta 100 eje. col-5 col-10 etc
.col-15{
    flex-basis: 15%;
    max-width:  15%;
}

EL PROBLEMA

Estoy creando un sitio el cual tiene algunas secciones las cuales están subdivididas en dos, cada una de las subdivisiones ocupa el 50% del viewport. una de las subdivisiones tiene una imagen de background y la otra tiene contenido el cual debe estar alineado con el resto de la página.

La pregunta es como alinear un contenido sin el contenedor(.container) con el resto del contenido de la pagina que si lo tiene.

una imagen para ilustrar el problema, la línea amarilla representa el contenedor(.container) para la alineación de la página y el borde rojo de las imágenes indican que estos elementos se salen por fuera del layout normal de la página.

introducir la descripción de la imagen aquí

2
  • Lo que puedes hacer es que se tenga un separación con padding o margin a los elementos de dos columnas que coincida con tu borde amarillo Commented el 6 feb. 2018 a las 3:36
  • Puedes darle una posicion relativa al .container y a posición absoluta a los cuadros de img dando propiedades left:0; y el otro right:100%;
    – Daniel
    Commented el 6 feb. 2018 a las 9:17

2 respuestas 2

2

Alguna vez, tuve que hacer este mismo ejercicio, la forma en que lo resolvi por aquel entonces fue combinando unidades vw, calc, custom properties (opcional) y margin, algo así:

.container{
  /* o la medida que se vaya a dejar de margen lateral*/
  --margenes: 10vw; 
  padding-left: var(--margenes);
  padding-right: var(--margenes);
}
  /*también se puede hacer si se desea que haya un ancho estandar*/
@media (min-width: 1024px){
  .container{
    --margenes: calc( (100vw - 1024px ) / 2); 
  }
}

.imagen{
  /*La imagen mide la mitad del contenedor más el margen lateral*/
  width: calc(50% + var(--margenes)); 
}

/*Se resta con el margen lateral correspondiente*/

.imagen.izquierda{
  margin-left: calc(var(--margenes) * -1);
}

.imagen.derecha{
  margin-right: calc(var(--margenes) * -1);
}

Mira en esta demo:

*{ box-sizing: border-box; margin: 0; padding: 0; }

body{
  background-color: whitesmoke;
  font-family: arial;
  text-align: left;
}

.contenedor{
  --margenes: 10vw;
  padding-left: var(--margenes);
  padding-right: var(--margenes);
}

.banner{
  background-color: blue; 
  min-height: 80vh;
  color: white;
  display: flex;
  justify-content: left;
  align-content: center;
  align-items: center;
}

.row{
  background-color: white;
  min-height: 50vh;
  display: flex;
  align-items: stretch;
}

.informacion{
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}

.imagen{
  width: calc(50% + var(--margenes));
  background: lightblue;
  background-size: cover;
  background-position: center;
}

.imagen.izquierda{
  margin-left: calc(var(--margenes) * -1);
  background-image: url(http://picsum.photos/1200/1200);
}

.imagen.derecha{
  margin-right: calc(var(--margenes) * -1);
  background-image: url(http://picsum.photos/1800/1200);
}
<body>
  <div class="contenedor-principal">
    <div class="contenedor banner">
       <h3>Título</h3>
    </div>
    <main class="contenedor contenido">
       <article class="row">
         <figure class="imagen izquierda"></figure>
         <div class="informacion">
           lorem ipsum
         </div>
       </article>
       <article class="row">
         <div class="informacion">
           lorem ipsum
         </div>
         <figure class="imagen derecha"></figure>
       </article>
    </main>
  </div>
</body>

Espero que igual aplique a tu proyecto, sino quedo atento en los comentarios a ver qué cambios podríamos aplicar o si podemos hayar otra solución.

1
  • Muy buen enfoque el que utilizaste, si en realidad hay que trabajar con calc y algunas medidas para poder centrar el layout. Commented el 6 feb. 2018 a las 17:36
0

Prueba metiendo la cabecera y el contenido en "contenedores", es decir, la cabecera en uno que ocupe el 100% y el texto con el logo le pones el % que quieras, lo mismo para el cuerpo de la web, te dejo el código que se ve más claro lo que quiero decir

Los border dashed los he puesto para que compruebes los márgenes y juegues con ellos

Saludos

body{
  color: white;
  text-align: center;
  font-family: verdana;
} 
header{
  width: 100%;  
  background-color: blue;
}
header .logo {
  max-width: 770px;
  margin: 0 auto;
  height: 200px;
  padding: 0 100px;
  border: 1px dashed red;
}
.container{
  width: 970px;
  background-color: white;
  margin: 0 auto;
}
.container .table{
  color: gray;
  display: table;
  width: 100%
};

.container .table section {
  display: table-row;
}

.container .table section article {
  display: table-cell;
  padding: 35px;
  width: 50%;
  border: 1px dashed red;
}

.container .table section article:first-child {
  text-align: left
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <div class="logo">
      <h1>titulo</h1>
      <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum soluta non obcaecati, odit iure necessitatibus est culpa aliquam aut cupiditate autem, aperiam sint velit animi, pariatur repellat a id officia.</small>
    </div>  
  </header>
  <div class="container">
    <div class="table">      
    
      <section>
        <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, aliquam, ullam. Eum mollitia commodi asperiores recusandae nihil repudiandae debitis corrupti quis architecto quae assumenda nam quibusdam maxime, maiores repellat. Ad.</article>
        <article>img</article>
      </section>
      
    </div>
  </div>
</body>
</html>

1
  • La cabecera que esta de primero también debe ocupar el 100%. pero su contenido debe estar dentro del container. Commented el 6 feb. 2018 a las 17:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.