Aligner 3 div

Bonjour,

je souhaiterai aligner 3 div. Je suis débutant et je ne maitrise pas cela. J'y suis arrivé avec des float left et right mais cela chevauche une div qui est en dessous.

Un div actus avec 3 actu, 1 titre et 1 paragraphe chacun.

<div id="actus">

        <div class="align_actu" id="actu1">

            <h2>Actu 1</h2>
            <p class="actu">Lorem ipsum dolor sit amet, .</p>
        </div>

        <div class="align_actu" id="actu2">

            <h2>Actu 2</h2>
            <p class="actu">Lorem ipsum dolor sit amet, .</p>
        </div>

        <div class="align_actu" id="actu3">

            <h2>Actu 3</h2>
            <p class="actu">Où puis-je m'en procurer?
                Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été </p>
        </div>
    
    </div>
        

       


    

    <div id="corps">

        <section id="ecole">

            <H1 id="ecole">ECOLE</H1>


        </section>

        <section id="college">

            <H1 id="college">COLLEGE</H1>
    
    
        </section>

        <section id="lycee">

            <H1 id="lycee">LYCEE</H1>
        
        
        </section>    



    </div>

Ca chevauche le div corps

Le code CSS

div#actus {

   margin: 15px 0px 15px 0px;
   width:100%;
   max-width:980px ; 
   border-radius:15px;
   margin:auto;
   padding:15px;
  
}


p.actu {

    text-align: justify

}


/div#actu1 {
   
    box-shadow: 6px 6px 6px #1c259c;
    float:left;
    width:30%; 

}

div#actu2 {
   
    box-shadow: 6px 6px 6px #29501d;
    display: inline-block;
    margin:0 auto;
    width:30%;
  
}

div#actu3 {
    
    box-shadow: 6px 6px 6px #f82a1b;
    float:right;
    width:30%;
   
}

Merci pour votre aide.
Modifié par Willstgab (14 Jun 2018 - 16:58)

Hello

Étudie ce bout de code:
http://jsfiddle.net/hpx28mn1/1/

Un peu de documentation pour comprendre le modèle de boîte en CSS:
https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte

Bonjour,

les éléments qui flottent doivent se trouver avant ceux qui ne flottent pas dans le code HTML.

Alors oui ce n'est pas très intuitif mais : /div#actu1 (pourquoi ce slash…) va flotter, il se trouve avant tout le monde donc pas de problèmes mais div#actu2 ne flotte pas et se trouve avant div#actu3 qui, lui, flotte. Problèmes donc. (Au passage pourquoi faire de div#actu2 un inline-block ? )

Laisse tomber float et passe à "display: flex; "
https://codepen.io/bazooka07/pen/vrJjap
Au moins on est sûr que les boites seront à la même hauteur
Quand un élément a un "id", inutile de préciser dans le CSS le nom de la balise associée :
"#actus" au lieu de "div#actus"

Bizarrement, on n'a pas le droit de préciser séparément la couleur d'un box-shadow ( pas de box-shadow-color ) comme pour border

Bonjour,

Merci pour vos réponses et vos liens.

Voilà ce que j'ai fait :

    <div id="actus">

        <!-- 1ere actu-->

        <div class="align_actu" id="actu1">

            <h2>Actu 1</h2>
            <p class="actu">Lorem ipsum dolor sit amet, .</p>
        </div>

        <!--3eme actu-->

        <div class="align_actu" id="actu2">

            <h2>Actu 3</h2>
            <p class="actu">Lorem ipsum dolor sit amet, .</p>
        </div>

        <!--2eme actu-->

        <div class="align_actu" id="actu3">

            <h2>Actu 2</h2>
            <p class="actu">Où puis-je m'en procurer?
                Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été </p>
        </div>
    
    </div>

div#actus {

   margin: 15px 0px 15px 0px;
   width:100%;
   max-width:980px ; 
   border-radius:15px;
   margin:auto;
   padding:15px;
  
}


p.actu {

    text-align: justify

}

.align_actu {

    width: 33%;
    height: 100px;
    /* display*/
    display: inline-block;
}

/* 1ere actu*/
div#actu1 {
 
    box-shadow: 6px 6px 6px #1c259c;
    float: left;
}

/*2eme actu*/

div#actu2 {
    padding: 0px 0px 0px 5px;
    box-shadow: 6px 6px 6px #29501d;
    float : right;
     
}

/*3eme actu*/
div#actu3 {
    padding: 0px 0px 0px 10px;
    box-shadow: 6px 6px 6px #f82a1b;
   
}

Et cela donne :

Un grand merci à vous.

J'aurai très certainement besoin de vos lumières à nouveau

Un peu de lecture pour ce week-end
https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

N'oublie pas qu'on construit un site internet pour fonctionner d'abord sur un smartphone, puis ensuite sur un PC.
Et avec des float:left et float:right, je sens l'affaire mal partie.

Il y a un bon émulateur de smartphone dans Google Chrome (touche F12, puis 2ème icône
https://developers.google.com/web/tools/chrome-devtools/device-mode/