18007 sujets

Questions générales et questions de débutants

Aligner trois div sur la même ligne

Bonjour, j'ai vraiment besoin d'aide avec un travail que je dois rendre :

Je dois créer une page web mais je n'arrive pas à aligner trois div et avec mon code, j'ai la div left et la div middle qui sont alignées mais la div right est au dessus.

CSS :

div. LEFT{
width: 300px;
height: 1700px;
margin-left: 20px;
margin-right: auto;
margin-bottom: 23px;
background-color: white;
opacity: 0.9;
border-radius:25px ;
float: left;
}
div. MIDDLE {
    width: 555px;
    height: 2200px;
    margin-left:auto;
    margin-right: 440px;
    margin-bottom: 23px;
    background-color: white;
    opacity: 0.9;
    border-radius: 25px;
    float: right;
    clear: left;
    text-indent:13px;
    text-align: 20pxs; 
    padding-left:5px;
    font-family: cursive;
    font-size: 1.0em;

}
div. RIGHT {
    width: 380px;
    height: 400px;
    margin-left: auto;
    margin-right: 20px;
    background-color: white;
    opacity: 0.9;
    border-radius: 25px;
}

(désolé si c'est confus je suis encore débutante^^)
Modifié par gcyrillus (24 Feb 2022 - 16:46)
Alex0123456 a écrit :
flex-direction: row;


Ca ne marche toujours pas... ou je l'écris surement au mauvais endroit
Modérateur
Bonjour,

Les flottants ne sont pas vraiment une bonne idée, pas vraiment fait pour ce que tu veut faire et surtout requiert de bien comprendre comment ils fonctionnent avec les effets de bords qu'ils impliquent. En gros, une galère pour quelqu'un qui débute comme toi. Aujourd'hui flex et grid facilite grandement la tache et l'apprentissage. Il y a quelques infos ici même:

https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html

https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.html

Cela devrais t'aider à t'affranchir des floats et de tes grosses marges approximatives ;

Bonne Aventure Smiley cligne
Modifié par gcyrillus (24 Feb 2022 - 16:45)
Sujet clos
Aller à