CSS - Deux div l'un à côté de l'autre ?

Bonjour,

J’ai le code HTMl suivant :

1
2
3
4
5
6

<article class="post">
    <div class="thumbnail">
    </div>
    <div class="contenu">
    </div>
</article>

Je souhaiterai avoir ma thumbnail sur la gauche, et mon contenu sur la droite. J’utilise donc ce CSS :

1
2
3
4

.thumbnail
{
float: left;
}

Cependant, en faisant cela, je ne peux pas appliquer de margin à mon élément "droite". Si je fais :

1
2
3
4

.contenu
{
margin-left: 10px;
}

Les 10px ne prenne pas en compte la div flotante. Je n’ai pas mes deux div espacés de 10px comme je le voudrais. Comment faire ?

Merci

Merci ! Pour être plus précis, j’ai ceci :

1
2
3
4
5

<div class="content">
    <div class="thumbnail"></div>
        <h1 class="titre_article">mon titre></h1>
        <p class="propriete_article">Ma date, ect</p>
</div>

Par exemple, avec ton article, j’ai choisi de mettre le css suivant :

1
2
3
4

.content
{
display: flex;
}

Bien que la thumbnail et le titre sont maintenant sur la même ligne, les propriètés sautent une ligne. Je ne comprends pas trop, avec cette prioriété tout devrait être sur la même ligne (en taille ça tient) ?

C’est pas comme ça que ça marche. Va voir les exemples de l’article en question.

Peux-tu préciser dans ce cas ? Si j’ai 3 div avec la propriété flexbox de bases ils ne devraient pas être aligné (comme en haut de ton article) ?

Si si. Mais là t’as pas 3 div ?

Hum, les balises h1 et p sont des balises "block" et devraient se comporter comme des div non ?

https://getbootstrap.com

Étrange, voici ce que j’ai chez moi :

L’image correspond au div "thumbnail", test à la balise h1 et la date au paragraphe. Pourtant remarquez que la date ne passe pas à droite du titre test alors qu’il y a la place. J’ai simplement mis le css avec display: flex; Du coup je ne comprends plus trop. Si je comprends bien, cela devrait faire comme sur le code de melepe et tout afficher sur une ligne.

Edit: J’ai trouvé mon erreur : les deux élements h1 et p étaient imbriqué dans un div supplémentaire (content):

1
2
3
4
5
6

<article class="post">
    <div class="thumbnail">
    </div>
    <div class="content">
        <h1 class="titre_article"></h1>
        <p class="propriete_article"></p>

Le flex agissait pour thumbnail et content mais pas pour les "sous" blocks.

Pourquoi ces dislikes sur mon post ? L’op connaît peut-être pas. Et qui fait encore du vanilla CSS aujourd’hui ?

Juste un lien, aucune phrase… C’est un peu brutal, surtout pour quelque chose qui n’a pas vraiment de rapport avec ma demande. Je connais bootstrap et je fais encore du CSS vanilla pour mon thème WordPress. Je pense que ton post aurait été mieux accueilli avec du texte avec.

J’ai un peu l’impression que tu confonds. La grande majorité des gens qui ne connaissent pas trop CSS/LESS/SASS et compagnie utilisent bootstrap, bulma et compagnie. La grande majorité des gens dont le boulot c’est CSS/LESS/SASS n’utilisent pas bootstrap, bulma et compagnie. Ils ne font pas tous du CSS vanilla, bien sûr, la majorité d’entre eux utilisent des choses comme LESS ou SASS, mais tous pourraient écrire du CSS vanilla, c’est leur expertise les feuilles de style. Mais ils n’utilisent pas bootstrap.

Et surtout, pour apprendre le CSS, il faut faire du CSS. Et Nicox11 n’a pas dit explicitement qu’il ne souhaitait pas apprendre le CSS, laissons-lui le bénéfice du toute, il est sur un site de partage de connaissance où il pose une question de CSS, si ça se trouve le CSS l’intéresse…