28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mettre deux <div> côte à côte

Bonjour

Je voudrais mettre côte à côte deux <div>. J'ai fureté sur le net, et j'ai trouvé la solution suivante:

Dans <body>, je crée une <div> qui va contenir les 2 <div> côte à côte
J'insère une <div> gauche qui "float" à gauche
J'insère une <div> qui se positionne à droite avec une marge gauche supérieure à la taille de la <div> de gauche
je mets dans le code html, après le div conteneur un <p style="clear:both"></p> et je continue ma page.

Problèmes :
1) le div intérieur dépasse du div "conteneur"
2) le "h2" que j'utilise, qui est normalement arrondi un peu en haut à gauche et beaucoup en haut à droite ressort tout carré quand il est utilisé dans le div "conteneur".

Quelqu'un aurait une idée ?

coté css :
[code=css]

h2{padding-top:8px;padding-left:5px;padding-bottom:3px;background-color:#5050ff;border-radius: 5px 10px 0 0;text-align:justify;color:#fff;font-style:italic;font-weight:700;font-size:13px;margin:0;}

div.conteneurboites{background-color:#e6e6fa;border:2px solid red;padding:3px;}

div.boitegauche{background-color:#5050ff;color:#006;margin-left:0;margin-right:0;font-size:9pt;text-align:justify;padding:0;height:auto;display:flex;width:59%;float:left;}

div.boitedroite{background-color:#5050ff;color:#006;margin-left:0;margin-right:0;font-size:9pt;text-align:justify;padding:0;height:auto;display:flex;margin-left:61%;}

div.article{background-color:#FFF;color:#006;margin-left:0;margin-right:0;font-size:9pt;text-align:justify;;padding:5px 16px 5px 3px;height:auto;}
Moi je laisserais tomber les floats - technique d'un autre âge - pour me pencher sur le modèle tabulaire (display: table) ou sur flexbox (display: flex).
Je vous laisse regarder les spécifications.
Merci Olivier

Display:flex, c'est ce que je fais aujourd'hui... (dans les propriétés css de ma "boitedroite" et de ma "boitegauche".)

D'ailleurs, j'aurais dû écrire "flex". J'ai essayé avec "float" aussi, et ça n'a pas vraiment fonctionné.
Je vais essayer de regarder le display:table, qui me semble intéressant (est qui rappelle furieusement les <table> ... d'un autre âge aussi !)

Mais mon problème, c'est surtout le fait que le <h2> ne fonctionne pas complètement (la couleur, la police : ça va, mais les arrondis de coin, ça ne va plus. voir ci-dessous : upload/1536519795-72371-bontesfloat.png
Modifié par Hubs (09 Sep 2018 - 21:09)
Voilà pour les div côte à côte en flex : CodePen
Donc display flex sur le conteneur et spécification de la largeur pour les enfants.

Pour les titres... c'est difficile de se mettre dans la tête des gens sans voir leur page... peut-être ces derniers étaient-ils appliqués seulement aux enfants directs du conteneur principal et que le fait d'avoir mis un conteneur en plus ("conteneurboites") a privé les titres de leur arrondis... sans voir le code dans son ensemble, ou mieux la page en ligne, on est réduit à des suppositions...
Modifié par Olivier C (11 Sep 2018 - 01:14)
bonsoir
Merci pour la réponse. Je veux bien afficher le code, mais j'avais lu dans les consignes du forum qu'il fallait éviter de le faire...
Alors je mets la page en ligne, en demandant à GG ne ne pas l'indexer. C'est là :

http://bazin-conseil.fr/essaiflex.html

Merci d'avance pour l'expertise
La majorité des gens utilisent un smartphone pour surfer sur Internet.
Et franchement la mise en page sur ta page d'accueil est loin d'être parfaite.
Et l'absence du menu hamburger ou triple bar se fait bien sentir.
bonjour.
Je sais. Cependant, la grosse majorité de *mes* visiteurs utilisent un PC (aux dernières nouvelles : 84%, C'est statcounter qui me le dit et me le confirme régulièrement). Cela vient du sujet, et du type d'internautes ciblés : des professionnels et/ou des étudiants qui bossent depuis un PC. Ils viennent voir 1 page, parfois 3 ou 4, passent du temps dessus, reviennent. Il y en a même 2% qui font plus de 10 visites. Mais ils rentrent sur le site par la page en question, pas (pas beaucoup) via la page d'accueil. Et les pages de mon site sont longues, avec beaucoup de texte, pas confortable non plus depuis un smartphone. Mais bien pour un PC.
Le vrai problème pour moi, n'est pas de conserver les 15% de visiteurs sur smartphone, c'est l'algo de google qui me pénalise un peu pour cette première page avec, en effet, des zones cliquables trop petites et trop proches.
Alors dans un premier temps, je vais rester comme ça. Mais oui, il faudrait changer. Pour un "hamburger" ? pas sûr que cette mode dure longtemps. Et pas envie de faire du développement (de code) pas durable... Mais merci pour la remarque.
Sujet clos
Aller à