28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS 3 Colonnes

J'ai un petit problème avec mon CSS 3 Colonnes.

Ma colonne de gauche et de droite vont contenir une image seulement, un espèce de banderole. Celle de droite est le mirroir de celle de gauche.

La ou je rencontre un probleme c'est au centre, lorsque mon texte déborde il ne s'ajuste pas a la largeur du centre.

Avez-vous une idee ? Voici mon code

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mise en page HTML5 / CSS : Flexbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes"> 
    <link href="css/1.css" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="global">
      <main>
        <aside>Annexe 1</aside>
        <section>
          <article>
            <header>
              <h1>Titre de l'Article 1</h1>
            </header>
            <div>contenu de l'article 1</div>
            <aside>liens de l'article 1</aside>
          </article>
          <article>
            <header>
              <h1>Titre de l'Article 2</h1>
            </header>
            <div>blah</div>
            <aside>liens de l'article 2</aside>
          </article>
        </section>
        <aside>Annexe 2</aside>
      </main>
      <footer>Footer</footer>
    </div>
 
  </body>
</html>


Et le CSS

* {
  margin:0; 
  padding:0; 
  box-sizing: border-box; /* pour maîtriser width et flex-basis */
}

#global {
  min-height: 100vh; /* toute la hauteur du viewport */
  display: flex;
  flex-direction: column; /* affichage vertical */
}

#global > main {
  display: flex;
  flex: 1 1 auto;
}

#global > main > section {
  flex: 1 1 auto;
}

/* -------------------- */
/* PHONE (MOBILE FIRST) */
@media (max-width: 767px) {
  #global > main {
    flex-direction: column; /* affichage vertical */
  }
  #global > main > aside {
    width:100%;
  }
  #global > main > section {
    order: -1; /* en premier (facultatif) */
  }
}

/* -------------------- */
/* TABLET */
@media (min-width: 768px) and (max-width: 1023px) {
  #global > main {
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  }
  #global > main > aside {
    width:15%;
  }
}

/* -------------------- */
/* DESKTOP */
@media (min-width: 1024px) {
  #global {
    /*max-width:1400px;*/
    margin:0 auto;
  }
  #global > main {
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  }
  #global > main > aside {
    width:246px;
  }
}
 
/* -------- */
/* Decoration */
body {
  margin: 0;
  background: #999;
  font-family: Trebuchet MS;
  font-size: 12pt;
}
#global > header,
#global > nav,
#global > main > aside,
#global > main > section,
#global > footer {
  padding: 0em;
}
#global > header {
  background: #feb;
}
#global > nav {
  background: #ccf;
}
#global > main > aside {
  background: #ccf;
}
#global > main > section {
  background: #dd8;
}
#global > footer {
  background: #feb;
}
/* -------- */


Merci pour votre aide, car présentement je ne sais plus quoi faire pour arriver a mes fins.
Administrateur
Hello,

Je ne suis pas sûr d'avoir bien compris le souci.

Toujours est-il que ta colonne centrale (<section>) est définie ainsi : flex: 1 1 auto; De ce fait, la largeur de cette colonne est "auto", ce qui correspond à la densité de texte : plus il y a de texte, plus cet élément s'agrandit.

Je pense que le plus simple est de réduire cette valeur à zéro, soit flex: 1 1 0;
Meilleure solution
Sujet clos
Aller à