Mise en page Barre latérale + Contenu

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 28 sur 35.

La mise en page Barre latérale + Contenu est un modèle responsive courant dans lequel vous disposez d'une zone de contenu principal et d'une barre latérale pour la navigation ou des informations supplémentaires.

Commencez par la structure HTML de base :

<div class="container">
  <main class="content">Main content here</main>
  <aside class="sidebar">Sidebar content here</aside>
</div>

Ajoutez maintenant le CSS pour une approche mobile-first :

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  padding: 20px;
}

.sidebar {
  padding: 20px;
  background-color: #f5f5f5;
}

Ajoutez ensuite une media query pour créer une mise en page côte à côte sur les écrans plus larges :

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  
  .content {
    flex: 3;
  }
  
  .sidebar {
    flex: 1;
  }
}

Cela crée une mise en page adaptative qui s'empile sur mobile et s'affiche côte à côte sur les écrans plus grands.

Défi

Facile

On vous donne une mise en page responsive Sidebar + Content stylisée avec une approche mobile-first.

Votre tâche :

Faites apparaître la barre latérale sur le côté droit du contenu sur les écrans plus larges que 768px.
Sur les écrans plus larges, donnez à la zone de contenu une largeur de 70% width et à la barre latérale une largeur de 30% width.

Aide-mémoire

La mise en page Barre latérale + Contenu utilise flexbox pour créer un modèle réactif avec une zone de contenu principal et une barre latérale.

Structure HTML de base :

<div class="container">
  <main class="content">Main content here</main>
  <aside class="sidebar">Sidebar content here</aside>
</div>

Approche CSS mobile-first :

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  padding: 20px;
}

.sidebar {
  padding: 20px;
  background-color: #f5f5f5;
}

Requête média (media query) pour les écrans plus larges :

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  
  .content {
    flex: 3;
  }
  
  .sidebar {
    flex: 1;
  }
}

Cela crée une mise en page qui s'empile verticalement sur mobile et s'affiche côte à côte sur des écrans plus larges.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Sidebar + Content Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1.6;
      background: #f5f7fa;
      color: #333;
    }

    .container {
      display: flex;
      flex-direction: column;
      max-width: 1100px;
      margin: 40px auto;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .content {
      padding: 25px;
    }

    .content h2 {
      color: #2a6592;
      margin-bottom: 15px;
    }

    .content p {
      margin-bottom: 1em;
    }
    
    .sidebar {
      padding: 25px;
      background-color: #eaf3fa;
      border-left: 3px solid #2a6592;
    }
    
    .sidebar h3 {
      margin-bottom: 15px;
      color: #2a6592;
    }

    .sidebar ul {
      list-style: none;
      padding-left: 0;
    }

    .sidebar li {
      margin: 10px 0;
    }

    .sidebar a {
      text-decoration: none;
      color: #2a6592;
      font-weight: 500;
      transition: color 0.2s;
    }

    .sidebar a:hover {
      color: #17405d;
    }

    @media (min-width: 768px) {

    }
  </style>
</head>
<body>
  <div class="container">
    <main class="content">
      <h2>Exploring Italy: A Travel Story</h2>
      <p>Italy is a country full of culture, history, and delicious food. From the romantic canals of Venice to the ancient ruins of Rome, every corner tells a story.</p>
      <p>During my trip, I explored Florence’s Renaissance art, enjoyed authentic pizza in Naples, and relaxed on the beautiful Amalfi Coast. Each city offered something unique and unforgettable.</p>
      <p>If you’re planning a trip, I recommend taking the time to explore both big cities and small villages. You’ll find hidden gems, welcoming locals, and memories that last forever.</p>
    </main>
    <aside class="sidebar">
      <h3>More Travel Guides</h3>
      <ul>
        <li><a href="#">Top 10 Things to Do in Rome</a></li>
        <li><a href="#">A Foodie’s Guide to Naples</a></li>
        <li><a href="#">Venice on a Budget</a></li>
        <li><a href="#">Best Beaches of Amalfi Coast</a></li>
      </ul>
    </aside>
  </div>
</body>
</html>