faire deux colonnes avec plusieurs élément par OscarDurand - page 1

Bonjour, comme vous le voyez dans mon html j'ai un "bloc left" et un "bloc right", cependant pour le moment tout les éléments sont en colonnes une par une. J'ai essayé le float, le flex, l'absolute mais je n'arrive toujours pas à mes fins. C'est peut être mes premier =s réglages dans le css qui font que...

Je me tourne alors vers vous pour voir si vous avez une solution à ma proposer.

bien à vous.

code html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>évaluation html</title>
    <link rel="stylesheet" href="css/main.css"
  </head>
  <body>
    <header>
      <div class="header-gauche">
      <img class="logo" src="img/logoinst.png">
      <h1>creation de site</h1>
      </div>
    <div class="menu">
      <ul>
        <li><a href="#" titles="eleves">eleves</a></li>
        <li><a href="#" titles="intervenants">intervenants</a></li>
      </ul>
    </div>
    </header>

    <section class="wrapper">

      <div class="bloc-left">

        <div class="bloc-myself">
              <div class="header-myself">
                <img src="img/GEORGES-Robin.jpg" alt="robin">
                <p>Robin<br/> GEORGES </P>
              </div>
              <div class="body-myself">
                <p>wslrjRnboQIJ</p>
              </div>
        </div>

        <div class="bloc-top5">
                  <div class="header-top5">
                    <h2>top 5</h2>
                  </div>
                  <div class="body-top5">

                      <div class="eleve">
                        <img class="profil" src="img/GEORGES-Robin.jpg">
                        <p>dtyikxfy</p>
                      </div>

                      <div class="eleve">
                        <img class="profil" src="img/GEORGES-Robin.jpg">
                        <p>dtyikxfy</p>
                      </div>

                      <div class="eleve">
                        <img class="profil" src="img/GEORGES-Robin.jpg">
                        <p>dtyikxfy</p>
                      </div>

                      <div class="eleve">
                        <img class="profil" src="img/GEORGES-Robin.jpg">
                        <p>dtyikxfy</p>
                      </div>

                      <div class="eleve">
                        <img class="profil" src="img/GEORGES-Robin.jpg">
                        <p>dtyikxfy</p>
                      </div>




                  </div>
            </div>

            <div class="bloc-galery">
              <div class="header-galery">
                <h3>portefolio</h3>
              </div>
              <div class="body-galery">
                <img class="element" src="img/GEORGES-Robin.jpg">
                <img class="element" src="img/GEORGES-Robin.jpg">
                <img class="element" src="img/GEORGES-Robin.jpg">
              </div>
            </div>
        </div>



        <div class="bloc-right">

          <div class="bloc-bio">
                <div class="header-bio">
                  <img src="img/GEORGES-Robin.jpg" alt="xtyi">
                </div>
                <div class="body-bio">
                  <h3>bio</h3>
                  <p>xfkyxfk</p>
                </div>
          </div>

          <div class="bloc-article">
                <div class="header-article">
                  <img src="img/GEORGES-Robin.jpg" alt="">
                </div>
                <div class="body-article">
                  <h3>bio</h3>
                  <p>wjfjxdt</p>
                </div>
                <div class="footer-article">
                  <img src="img/GEORGES-Robin.jpg" alt="gkh">
                  <p>dwtjwftj</p>
                </div>
                <div class="footer-article">
                  <div class="commentaire">
                  <img src="img/GEORGES-Robin.jpg" alt="cgk">
                  <p>wrtjrxwtjxt</p>
                  </div>
                </div>
          </div>

          <div class="bloc-galery2">
                    <div class="body-top5">

                        <div class="eleve">
                          <img class="profil" src="img/GEORGES-Robin.jpg">
                          <p>tdjxrftj</p>
                        </div>

                        <div class="eleve">
                          <img class="profil" src="img/GEORGES-Robin.jpg">
                          <p>txrjwtj</p>
                        </div>

                        <div class="eleve">
                          <img class="profil" src="img/GEORGES-Robin.jpg">
                          <p>xwtjsrtj</p>
                        </div>

                        <div class="eleve">
                          <img class="profil" src="img/GEORGES-Robin.jpg">
                          <p>rtjwtr</p>
                        </div>

                        <div class="eleve">
                          <img class="profil" src="img/GEORGES-Robin.jpg">
                          <p>rtjwwtj</p>
                        </div>

                        <div class="eleve">
                          <img class="profil" src="img/GEORGES-Robin.jpg">
                          <p>srtjsryj</p>
                        </div>

                    </div>
              </div>

              <div class="bloc-galery2">
                <div class="body-galery2">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">
                  <img class="element2" src="img/GEORGES-Robin.jpg">


                </div>
              </div>
          </div>
  </section>



  </body>
</html>

css

body{
  margin: 0;
}

header{
  margin: 0;
  background:#ccc;
  display: flex;
  justify-content: space-between;
  text-align: : center;
}

header div h1{
  margin-top: 37px;
  float: right;
}

header div ul li{
  display: inline-block;
  margin-top: 40px;
  margin-right: 20px;
}

.logo{
  padding: 10px;
  height: 100px;
}

.wrapper{
  text-align: center;

}

.bloc-left{
}

OscarDurand

16 décembre 2018 à 20:05:52

Domi65

17 décembre 2018 à 11:45:20

Bonjour.

Si tu veux que deux div flottants soient l'un à côté de l'autre, il faut (si on les veut de même largeur) qu'ils ne dépassent pas la moitié de la largeur de la page.

div {float: left; width: 50%;}

Mais il y a de très fortes chances que cela ne suffise pas. A cause des padding, border ou margin

On peut réduire la largeur (width: 45%), mais c'est aléatoire et pas joli. Le mieux est de rajouter les deux règles {box-sizing: border-box; margin:0}

Et le tour est joué.

div {

float: left;

width: 50%;

box-sizing: border-box;

margin:0;

}

Cordialement.

faire deux colonnes avec plusieurs élément

faire deux colonnes avec plusieurs élément

Supprimer

Modérer

Signaler le message aux modérateurs