Hoe te maken: Blogindeling

Previous page Zigzag layout
Next page Weight conversion

Leer hoe je een responsieve blogindeling kunt maken met CSS.

Leer hoe je een responsieve blogindeling kunt maken, die verandert tussen twee kolommen en een volledige breedte kolom op basis van het schermbreedte.

Pas de grootte van het browservenster aan om de responsieve effecten te bekijken:

Try it yourself

Hoe een blogindeling te maken

Stap 1 - Voeg HTML toe:

<div class="header">
  <h2>Blognaam</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Titelkopkop</h2>
      <h5>Omschrijving van de titel, 7 dec 2017</h5>
      <div class="fakeimg" style="height:200px;">Afbeelding</div>
      <p>Some text..</p>
    </div>
    <div class="card">
      <h2>Titelkopkop</h2>
      <h5>Omschrijving van de titel, 2 sep 2017</h5>
      <div class="fakeimg" style="height:200px;">Afbeelding</div>
      <p>Some text..</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Over Mij</h2>
      <div class="fakeimg" style="height:100px;">Afbeelding</div>
      <p>Enkele tekst over mij in schuld die weigert om officieel verantwoordelijk te zijn voor het ontbreken van mollit animus..</p>
    </div>
    <div class="card">
      <h3>Popular Posts</h3>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
</div>

Second step - Add CSS:

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* Header / Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Create two unequal columns, floating against each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Add card effect to articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Clear float after columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Responsive layout - When the screen width is less than 800px, the two columns stack on top of each other instead of being side by side */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

Try it yourself

Tutorial:CSS website layout

Tutorial:CSS responsive web design