highercomve/alineacion1.html

## alineacion1.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Como Organizar elementos</title>
  <link rel="stylesheet" href="https://gist.githubusercontent.com/highercomve/652f3954e06e0fbcd622/raw/a88d84ea9536ae77783aa05d4bdac5cda132e921/alineacion2.css">
</head>
<body>
  <header>
    <div class="row">
      <h1>Como alinear elementos HTML</h1>
    </div>
  </header>

  <section id="display-inline">
    <div class="row">
      <header>
        <h2>Alineación usando display inline block</h2>
        <p>
          Los elementos inline block se alinean uno al lado del otro.
          De tal manera que podemos generar divisiones de manera
          horizontal sobre nuestra pagina web.
        </p>
        <p>
          El inconveniente con este tipo de alineacion es que siempre
          entre elementos HTML queda por default un espacio (el caracter de espacio).
          Lo que dificulta la diagramacion exacta.
        </p>
      </header>
      <article class="display-inlineblock uncuarto">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quisquam adipisci tempore doloribus dolorem reiciendis maxime expedita vero deserunt eos quod perspiciatis voluptates, rem! Tempore numquam fugit odit, quo animi.</p>
      </article>
      <article class="display-inlineblock uncuarto">
        <p>Voluptate eaque alias, nesciunt sint numquam inventore unde exercitationem itaque. Quidem dicta nisi atque quos debitis sit quas eaque magnam impedit sapiente cum fugit, in, assumenda voluptate sunt vel itaque.</p>
      </article>
      <article class="display-inlineblock uncuarto">
        <p>Velit, quae fuga suscipit. Vitae ad dolorem consequuntur ullam maiores facere eos, vel, voluptate ex qui. Esse, architecto ipsa rerum in qui deserunt laboriosam adipisci ab, eos eius, cumque minus?</p>
      </article>
      <article class="display-inlineblock uncuarto">
        <p>Iste, nisi odit dolore magni neque nobis velit veritatis fuga perspiciatis reiciendis, sed. Atque neque facere praesentium, necessitatibus qui molestiae eius eum tempore magni cupiditate culpa omnis voluptatibus laboriosam modi.</p>
      </article>
    </div>
  </section>

  <section id="display-table">
    <div class="row table">
      <header>
        <h2>Alineación usando display table cell</h2>
        <p>
          Los elementos display table-cell se alinean uno al lado del otro
          como si fuesen columnas de una tabla.
        </p>
        <p>
          Por lo tanto cada vez que necesitemos generar elementos alineados
          horizontalmente, tenemos que generar un "fila" para poder dividir
          la pantalla. Manteniendo una estructura muy similar a la tabla
        </p>
        <p>
          El inconveniente con este tipo de alineacion es que browsers no
          lo soportan, como IE menores a 8
        </p>
      </header>
      <article class="display-table">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quisquam adipisci tempore doloribus dolorem reiciendis maxime expedita vero deserunt eos quod perspiciatis voluptates, rem! Tempore numquam fugit odit, quo animi.</p>
      </article>
      <article class="display-table">
        <p>Voluptate eaque alias, nesciunt sint numquam inventore unde exercitationem itaque. Quidem dicta nisi atque quos debitis sit quas eaque magnam impedit sapiente cum fugit, in, assumenda voluptate sunt vel itaque.</p>
      </article>
      <article class="display-table">
        <p>Velit, quae fuga suscipit. Vitae ad dolorem consequuntur ullam maiores facere eos, vel, voluptate ex qui. Esse, architecto ipsa rerum in qui deserunt laboriosam adipisci ab, eos eius, cumque minus?</p>
      </article>
      <article class="display-table">
        <p>Iste, nisi odit dolore magni neque nobis velit veritatis fuga perspiciatis reiciendis, sed. Atque neque facere praesentium, necessitatibus qui molestiae eius eum tempore magni cupiditate culpa omnis voluptatibus laboriosam modi.</p>
      </article>
      <hr>
      <h2>
        Sin importar la cantidad de "Columnas" que usemos siempre, se ajustan
        al ancho.
      </h2>
      <hr>
      <div class="row table">
        <article class="display-table">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quisquam adipisci tempore doloribus dolorem reiciendis maxime expedita vero deserunt eos quod perspiciatis voluptates, rem! Tempore numquam fugit odit, quo animi.</p>
      </article>
      <article class="display-table">
        <p>Voluptate eaque alias, nesciunt sint numquam inventore unde exercitationem itaque. Quidem dicta nisi atque quos debitis sit quas eaque magnam impedit sapiente cum fugit, in, assumenda voluptate sunt vel itaque.</p>
      </article>
      </div>
    </div>
  </section>

  <section id="float-align">
    <div class="row">
      <header>
        <h2>Alineacion por flotacion</h2>
        <p>
          La alineacion por flotacion puede ser uno de las mas comunes.
          El uso de esta alineacion esta por toda la internet, por su compatibilidad
          con todos los browsers.
        </p>
        <p>
          Aunque es la mas popular esto no le resta a lo poco amigable que puede ser
          cuando elementos de distintos altos quieren estan uno al lado del otro.
          Y con respecto a los elementos alrededor que no estan flotando
        </p>
      </header>
      <article class="float uncuarto">
          <h4>Lorem ipsum dolor sit.</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita omnis dolorum perspiciatis ullam voluptatum beatae error quam repellendus odit deleniti, eveniet laudantium rem voluptatibus est. Adipisci, optio recusandae ratione.</p>
        </article>
        <article class="float uncuarto">
          <h4>Facere et facilis, quaerat.</h4>
          <p>Quaerat consequuntur obcaecati cum molestias necessitatibus soluta voluptatem molestiae quam quos, repudiandae delectus sapiente nam cumque consequatur repellat omnis non, libero magni? Perferendis perspiciatis similique magni velit aperiam, unde voluptatem!</p>
        </article>
        <article class="float uncuarto">
          <h4>Optio, quibusdam voluptatem voluptatibus.</h4>
          <p>A cumque quia, minus distinctio autem, ipsum quae esse modi repudiandae quisquam, ipsa fugit sit deleniti! Corporis blanditiis rem non cupiditate nostrum eius voluptates iure sapiente, molestiae velit omnis doloremque.</p>
        </article>
        <article class="float uncuarto">
          <h4>Illum cumque aliquam aperiam!</h4>
          <p>Id veniam ab voluptatibus vero et necessitatibus iure ipsam, officiis eaque tempora quo, molestias laudantium voluptatem? Maiores aut consequuntur cumque ut dicta a corporis vero nemo, ad dignissimos exercitationem voluptatum.</p>
        </article>
        <article class="float uncuarto">
          <h4>Iusto vel amet magnam.</h4>
          <p>Rem quo eius sequi enim fuga reprehenderit, ut delectus ea atque magni praesentium, dolore ipsam, nisi voluptatibus eum harum sit sed, corporis reiciendis quos quasi ab laudantium. Sit, doloremque assumenda?</p>
        </article>
        <article class="float uncuarto">
          <h4>Voluptatibus adipisci, aut beatae!</h4>
          <p>Quisquam excepturi temporibus, voluptate commodi. Voluptates, optio, harum. Doloremque dignissimos facilis corrupti consequuntur molestias voluptatibus quae, tenetur id neque quod quaerat sint incidunt explicabo nam ipsum saepe corporis aut. Laudantium!</p>
        </article>
        <article class="float uncuarto">
          <h4>Earum consequuntur quisquam, numquam.</h4>
          <p>Eaque ipsum libero reiciendis commodi possimus. Voluptatem vitae optio praesentium possimus autem pariatur quibusdam beatae omnis necessitatibus sint harum nemo dolorum vel, laborum, et maiores. Nesciunt illum itaque fugiat, quaerat!</p>
        </article>
        <article class="float uncuarto">
          <h4>Dolorum mollitia eveniet adipisci!</h4>
          <p>Soluta officia voluptate, dolorum, libero molestias nulla rerum reprehenderit cumque, assumenda voluptatum ipsum minima quas neque sequi repudiandae, obcaecati ipsam asperiores. Facere architecto necessitatibus dolore nam eligendi aliquam, nihil minus.</p>
        </article>
        <div class="clearfix"></div>
        <h4>
          Si todos los elementos son el mismo alto el problema. Se elimina
        </h4>
        <div class="clearfix"></div>
        <section class="float uncuarto alto-fijo">
          <h4>Lorem ipsum dolor sit.</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla tenetur, porro explicabo placeat reiciendis debitis, provident maiores quisquam qui commodi dolore optio odit est, aspernatur in corporis quam numquam aperiam!</p>
        </section>
        <section class="float uncuarto alto-fijo">
          <h4>Perferendis quasi vero pariatur.</h4>
          <p>Maxime, consectetur. Labore quisquam maxime quis perspiciatis. Tempore excepturi eveniet obcaecati adipisci quae culpa reiciendis, laudantium nemo sunt totam tempora, labore porro illo praesentium assumenda sapiente aperiam, vel in impedit.</p>
        </section>
        <section class="float uncuarto alto-fijo">
          <h4>Aspernatur sequi labore, cupiditate.</h4>
          <p>Earum quam sunt neque ex illum molestiae deleniti adipisci eos aliquid voluptate sequi, dolores vel fugit eaque recusandae nostrum enim, velit tempora alias provident minima nam omnis voluptas ad. Magnam!</p>
        </section>
        <section class="float uncuarto alto-fijo">
          <h4>Et, corporis quis officiis!</h4>
          <p>Debitis odit sed deserunt reiciendis atque est maiores, in veritatis asperiores error adipisci repellat sapiente, perferendis quod provident explicabo quaerat quasi officia modi repudiandae neque, et? Atque odio impedit dolores!</p>
        </section>
        <section class="float uncuarto alto-fijo">
          <h4>Repellendus, cumque vitae eligendi?</h4>
          <p>Corporis a vero minus fugit mollitia facilis cum nam magnam reiciendis necessitatibus repellendus incidunt esse tempore deleniti expedita aperiam laborum magni iusto aliquam aliquid ipsa error, repudiandae illo quidem? Adipisci.</p>
        </section>
        <section class="float uncuarto alto-fijo">
          <h4>Minima temporibus, accusantium necessitatibus.</h4>
          <p>Molestiae at saepe explicabo iure aliquid sint, minima ex sapiente adipisci dolor ea accusantium. Fuga quod eos nobis, et repellat inventore cum omnis enim. Sit commodi, perspiciatis velit saepe quisquam!</p>
        </section>
        <section class="float uncuarto alto-fijo">
          <h4>Impedit animi, recusandae. Reprehenderit.</h4>
          <p>Mollitia hic ullam, asperiores temporibus magni sed praesentium laborum adipisci officia odio voluptate alias? Iure hic a quidem expedita officiis laboriosam, et perferendis quis libero vel! Quaerat repudiandae nobis, hic?</p>
        </section>
        <section class="float uncuarto alto-fijo">
          <h4>Esse animi dolores, adipisci.</h4>
          <p>Et eligendi, autem rem dolores ipsam harum vitae obcaecati, optio doloribus quaerat tempore saepe, quae, adipisci eaque accusantium exercitationem cumque sed laborum quas delectus non! Expedita commodi, neque libero saepe?</p>
        </section>

    </div>
  </section>
</body>
</html>

## alineacion2.css
body {
  font-family: Helvetica;
  margin: 0;
  padding: 0;
}

header {
  padding: 1em;
  margin-bottom: 1em;
  background-color: #f2f2f2;
}

/*
Selector en cascada para selecionar todos los elementos "h1"
dentro de cualquier elemento "header"
*/
header h1 {
  color: #000;
  font-weight: normal;
  text-transform: capitalize;
  font-variant: small-caps;
  text-align: center;
}

.row {
  max-width: 940px;
  margin: 0 auto;
/*
  Al margin se define con dos valores se configura los 4 margenes
  del elementos, pero usando la siguiente regla

  El primer valor sera asignado al "margin-top" y "margin-bottom"
  Mientras que el segundo a "margin-right" y "margin-left"

*/
}
.display-inlineblock {
  display: inline-block;
  zoom: 1;
}

/*
Necitamos selecionar todos los elementos pertenezcan al mismo
tiempo a la clase "display-inlineblock" y la clase "uncuarto"
de esa manera asegurarnos que la clase "uncuarto" solo aplique
estilos siempre y cuando este al lado de la clase "display-inlineblock"
*/
.display-inlineblock.uncuarto {
  width: 25%;
/*
  Al colocar el elemento en 25% notaran que no son capaces de ocupar
  el 100% a pesar de ser cuatro elementos de 25%, eso debido al espacio
  en blanco entre cada div.display-inlineblock.uncuarto
*/
}

.row.table {
  width: 100%;
  height: 100%;
}

.display-table {
  display: table-cell;
  width: 1%;
  padding: 1em;
}

/*Alineacion con Float*/
.row:before,
.row:after {
  display: block;
  content: "";
  clear: both;
}

.float {
  float: left;
  box-sizing: border-box;
}
.clearfix {
  clear: both;
}
.float.uncuarto {
  width: 25%;
  padding: 1em;
}
.float.uncuarto.alto-fijo {
  height: 300px;
  margin-bottom: 1em;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Como Organizar elementos</title>
	<link rel="stylesheet" href="https://gist.githubusercontent.com/highercomve/652f3954e06e0fbcd622/raw/a88d84ea9536ae77783aa05d4bdac5cda132e921/alineacion2.css">
	</head>
	<body>
	<header>
	<div class="row">
	<h1>Como alinear elementos HTML</h1>
	</div>
	</header>

	<section id="display-inline">
	<div class="row">
	<header>
	<h2>Alineación usando display inline block</h2>
	<p>
	Los elementos inline block se alinean uno al lado del otro.
	De tal manera que podemos generar divisiones de manera
	horizontal sobre nuestra pagina web.
	</p>
	<p>
	El inconveniente con este tipo de alineacion es que siempre
	entre elementos HTML queda por default un espacio (el caracter de espacio).
	Lo que dificulta la diagramacion exacta.
	</p>
	</header>
	<article class="display-inlineblock uncuarto">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quisquam adipisci tempore doloribus dolorem reiciendis maxime expedita vero deserunt eos quod perspiciatis voluptates, rem! Tempore numquam fugit odit, quo animi.</p>
	</article>
	<article class="display-inlineblock uncuarto">
	<p>Voluptate eaque alias, nesciunt sint numquam inventore unde exercitationem itaque. Quidem dicta nisi atque quos debitis sit quas eaque magnam impedit sapiente cum fugit, in, assumenda voluptate sunt vel itaque.</p>
	</article>
	<article class="display-inlineblock uncuarto">
	<p>Velit, quae fuga suscipit. Vitae ad dolorem consequuntur ullam maiores facere eos, vel, voluptate ex qui. Esse, architecto ipsa rerum in qui deserunt laboriosam adipisci ab, eos eius, cumque minus?</p>
	</article>
	<article class="display-inlineblock uncuarto">
	<p>Iste, nisi odit dolore magni neque nobis velit veritatis fuga perspiciatis reiciendis, sed. Atque neque facere praesentium, necessitatibus qui molestiae eius eum tempore magni cupiditate culpa omnis voluptatibus laboriosam modi.</p>
	</article>
	</div>
	</section>

	<section id="display-table">
	<div class="row table">
	<header>
	<h2>Alineación usando display table cell</h2>
	<p>
	Los elementos display table-cell se alinean uno al lado del otro
	como si fuesen columnas de una tabla.
	</p>
	<p>
	Por lo tanto cada vez que necesitemos generar elementos alineados
	horizontalmente, tenemos que generar un "fila" para poder dividir
	la pantalla. Manteniendo una estructura muy similar a la tabla
	</p>
	<p>
	El inconveniente con este tipo de alineacion es que browsers no
	lo soportan, como IE menores a 8
	</p>
	</header>
	<article class="display-table">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quisquam adipisci tempore doloribus dolorem reiciendis maxime expedita vero deserunt eos quod perspiciatis voluptates, rem! Tempore numquam fugit odit, quo animi.</p>
	</article>
	<article class="display-table">
	<p>Voluptate eaque alias, nesciunt sint numquam inventore unde exercitationem itaque. Quidem dicta nisi atque quos debitis sit quas eaque magnam impedit sapiente cum fugit, in, assumenda voluptate sunt vel itaque.</p>
	</article>
	<article class="display-table">
	<p>Velit, quae fuga suscipit. Vitae ad dolorem consequuntur ullam maiores facere eos, vel, voluptate ex qui. Esse, architecto ipsa rerum in qui deserunt laboriosam adipisci ab, eos eius, cumque minus?</p>
	</article>
	<article class="display-table">
	<p>Iste, nisi odit dolore magni neque nobis velit veritatis fuga perspiciatis reiciendis, sed. Atque neque facere praesentium, necessitatibus qui molestiae eius eum tempore magni cupiditate culpa omnis voluptatibus laboriosam modi.</p>
	</article>
	<hr>
	<h2>
	Sin importar la cantidad de "Columnas" que usemos siempre, se ajustan
	al ancho.
	</h2>
	<hr>
	<div class="row table">
	<article class="display-table">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quisquam adipisci tempore doloribus dolorem reiciendis maxime expedita vero deserunt eos quod perspiciatis voluptates, rem! Tempore numquam fugit odit, quo animi.</p>
	</article>
	<article class="display-table">
	<p>Voluptate eaque alias, nesciunt sint numquam inventore unde exercitationem itaque. Quidem dicta nisi atque quos debitis sit quas eaque magnam impedit sapiente cum fugit, in, assumenda voluptate sunt vel itaque.</p>
	</article>
	</div>
	</div>
	</section>

	<section id="float-align">
	<div class="row">
	<header>
	<h2>Alineacion por flotacion</h2>
	<p>
	La alineacion por flotacion puede ser uno de las mas comunes.
	El uso de esta alineacion esta por toda la internet, por su compatibilidad
	con todos los browsers.
	</p>
	<p>
	Aunque es la mas popular esto no le resta a lo poco amigable que puede ser
	cuando elementos de distintos altos quieren estan uno al lado del otro.
	Y con respecto a los elementos alrededor que no estan flotando
	</p>
	</header>
	<article class="float uncuarto">
	<h4>Lorem ipsum dolor sit.</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita omnis dolorum perspiciatis ullam voluptatum beatae error quam repellendus odit deleniti, eveniet laudantium rem voluptatibus est. Adipisci, optio recusandae ratione.</p>
	</article>
	<article class="float uncuarto">
	<h4>Facere et facilis, quaerat.</h4>
	<p>Quaerat consequuntur obcaecati cum molestias necessitatibus soluta voluptatem molestiae quam quos, repudiandae delectus sapiente nam cumque consequatur repellat omnis non, libero magni? Perferendis perspiciatis similique magni velit aperiam, unde voluptatem!</p>
	</article>
	<article class="float uncuarto">
	<h4>Optio, quibusdam voluptatem voluptatibus.</h4>
	<p>A cumque quia, minus distinctio autem, ipsum quae esse modi repudiandae quisquam, ipsa fugit sit deleniti! Corporis blanditiis rem non cupiditate nostrum eius voluptates iure sapiente, molestiae velit omnis doloremque.</p>
	</article>
	<article class="float uncuarto">
	<h4>Illum cumque aliquam aperiam!</h4>
	<p>Id veniam ab voluptatibus vero et necessitatibus iure ipsam, officiis eaque tempora quo, molestias laudantium voluptatem? Maiores aut consequuntur cumque ut dicta a corporis vero nemo, ad dignissimos exercitationem voluptatum.</p>
	</article>
	<article class="float uncuarto">
	<h4>Iusto vel amet magnam.</h4>
	<p>Rem quo eius sequi enim fuga reprehenderit, ut delectus ea atque magni praesentium, dolore ipsam, nisi voluptatibus eum harum sit sed, corporis reiciendis quos quasi ab laudantium. Sit, doloremque assumenda?</p>
	</article>
	<article class="float uncuarto">
	<h4>Voluptatibus adipisci, aut beatae!</h4>
	<p>Quisquam excepturi temporibus, voluptate commodi. Voluptates, optio, harum. Doloremque dignissimos facilis corrupti consequuntur molestias voluptatibus quae, tenetur id neque quod quaerat sint incidunt explicabo nam ipsum saepe corporis aut. Laudantium!</p>
	</article>
	<article class="float uncuarto">
	<h4>Earum consequuntur quisquam, numquam.</h4>
	<p>Eaque ipsum libero reiciendis commodi possimus. Voluptatem vitae optio praesentium possimus autem pariatur quibusdam beatae omnis necessitatibus sint harum nemo dolorum vel, laborum, et maiores. Nesciunt illum itaque fugiat, quaerat!</p>
	</article>
	<article class="float uncuarto">
	<h4>Dolorum mollitia eveniet adipisci!</h4>
	<p>Soluta officia voluptate, dolorum, libero molestias nulla rerum reprehenderit cumque, assumenda voluptatum ipsum minima quas neque sequi repudiandae, obcaecati ipsam asperiores. Facere architecto necessitatibus dolore nam eligendi aliquam, nihil minus.</p>
	</article>
	<div class="clearfix"></div>
	<h4>
	Si todos los elementos son el mismo alto el problema. Se elimina
	</h4>
	<div class="clearfix"></div>
	<section class="float uncuarto alto-fijo">
	<h4>Lorem ipsum dolor sit.</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla tenetur, porro explicabo placeat reiciendis debitis, provident maiores quisquam qui commodi dolore optio odit est, aspernatur in corporis quam numquam aperiam!</p>
	</section>
	<section class="float uncuarto alto-fijo">
	<h4>Perferendis quasi vero pariatur.</h4>
	<p>Maxime, consectetur. Labore quisquam maxime quis perspiciatis. Tempore excepturi eveniet obcaecati adipisci quae culpa reiciendis, laudantium nemo sunt totam tempora, labore porro illo praesentium assumenda sapiente aperiam, vel in impedit.</p>
	</section>
	<section class="float uncuarto alto-fijo">
	<h4>Aspernatur sequi labore, cupiditate.</h4>
	<p>Earum quam sunt neque ex illum molestiae deleniti adipisci eos aliquid voluptate sequi, dolores vel fugit eaque recusandae nostrum enim, velit tempora alias provident minima nam omnis voluptas ad. Magnam!</p>
	</section>
	<section class="float uncuarto alto-fijo">
	<h4>Et, corporis quis officiis!</h4>
	<p>Debitis odit sed deserunt reiciendis atque est maiores, in veritatis asperiores error adipisci repellat sapiente, perferendis quod provident explicabo quaerat quasi officia modi repudiandae neque, et? Atque odio impedit dolores!</p>
	</section>
	<section class="float uncuarto alto-fijo">
	<h4>Repellendus, cumque vitae eligendi?</h4>
	<p>Corporis a vero minus fugit mollitia facilis cum nam magnam reiciendis necessitatibus repellendus incidunt esse tempore deleniti expedita aperiam laborum magni iusto aliquam aliquid ipsa error, repudiandae illo quidem? Adipisci.</p>
	</section>
	<section class="float uncuarto alto-fijo">
	<h4>Minima temporibus, accusantium necessitatibus.</h4>
	<p>Molestiae at saepe explicabo iure aliquid sint, minima ex sapiente adipisci dolor ea accusantium. Fuga quod eos nobis, et repellat inventore cum omnis enim. Sit commodi, perspiciatis velit saepe quisquam!</p>
	</section>
	<section class="float uncuarto alto-fijo">
	<h4>Impedit animi, recusandae. Reprehenderit.</h4>
	<p>Mollitia hic ullam, asperiores temporibus magni sed praesentium laborum adipisci officia odio voluptate alias? Iure hic a quidem expedita officiis laboriosam, et perferendis quis libero vel! Quaerat repudiandae nobis, hic?</p>
	</section>
	<section class="float uncuarto alto-fijo">
	<h4>Esse animi dolores, adipisci.</h4>
	<p>Et eligendi, autem rem dolores ipsam harum vitae obcaecati, optio doloribus quaerat tempore saepe, quae, adipisci eaque accusantium exercitationem cumque sed laborum quas delectus non! Expedita commodi, neque libero saepe?</p>
	</section>

	</div>
	</section>
	</body>
	</html>
	body {
	font-family: Helvetica;
	margin: 0;
	padding: 0;
	}

	header {
	padding: 1em;
	margin-bottom: 1em;
	background-color: #f2f2f2;
	}

	/*
	Selector en cascada para selecionar todos los elementos "h1"
	dentro de cualquier elemento "header"
	*/
	header h1 {
	color: #000;
	font-weight: normal;
	text-transform: capitalize;
	font-variant: small-caps;
	text-align: center;
	}

	.row {
	max-width: 940px;
	margin: 0 auto;
	/*
	Al margin se define con dos valores se configura los 4 margenes
	del elementos, pero usando la siguiente regla

	El primer valor sera asignado al "margin-top" y "margin-bottom"
	Mientras que el segundo a "margin-right" y "margin-left"

	*/
	}
	.display-inlineblock {
	display: inline-block;
	zoom: 1;
	}

	/*
	Necitamos selecionar todos los elementos pertenezcan al mismo
	tiempo a la clase "display-inlineblock" y la clase "uncuarto"
	de esa manera asegurarnos que la clase "uncuarto" solo aplique
	estilos siempre y cuando este al lado de la clase "display-inlineblock"
	*/
	.display-inlineblock.uncuarto {
	width: 25%;
	/*
	Al colocar el elemento en 25% notaran que no son capaces de ocupar
	el 100% a pesar de ser cuatro elementos de 25%, eso debido al espacio
	en blanco entre cada div.display-inlineblock.uncuarto
	*/
	}

	.row.table {
	width: 100%;
	height: 100%;
	}

	.display-table {
	display: table-cell;
	width: 1%;
	padding: 1em;
	}

	/Alineacion con Float/
	.row:before,
	.row:after {
	display: block;
	content: "";
	clear: both;
	}

	.float {
	float: left;
	box-sizing: border-box;
	}
	.clearfix {
	clear: both;
	}
	.float.uncuarto {
	width: 25%;
	padding: 1em;
	}
	.float.uncuarto.alto-fijo {
	height: 300px;
	margin-bottom: 1em;
	}