28172 sujets

CSS et mise en forme, CSS3

2 DIV côté à côté avec le contenu centrer verticalement

Bonjour,
Je me permets de vous laisser un message car je cherche depuis des jours sans succès à mettre 2 div côte à côté avec le contenu centrer verticalement.

Voici mon code

<div id="post-bloc-photo-title">
<div id="post-photo-title-contenu"><img src="monimage.jpg></div>
<div id="post-photo-title-contenu"><p>Contenu</p></div>
</div>


Voici mon CSS

#post-photo-title-contenu {float: left; width: 50%; margin: 0 auto;}
#post-bloc-photo-title #post-photo-title-contenu p {padding-left: 10px; padding-right: 10px;}
}


Comme vous pouvez le constater, j'ai triché avec le padding-top mais cela ne se prête pas à tous mes contenus, je cherche donc la solution pour centrer ce contenu.

Voici un ensemble de site qui fait ce que je voudrais faire : https://ibb.co/iP1857
Modifié par jnce84 (11 Mar 2018 - 08:52)
Essaye en mettant les deux div dans une soit :

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

Smiley smile
Modifié par Integrator (09 Mar 2018 - 18:01)
Ton code est pas bon, tu utilises deux fois le même id.

Je pense que tu veux faire un truc de ce genre non ? :

<div class="container">
  <div class="droite"></div>
  <div class="gauche"></div>
</div>


.droite{
  width: 50%;
  height: 200px;
  background-color: blue;
  float:right;
}

.gauche{
  width: 50%;
  height: 200px;
  background-color: red;
  float: left;
}
Modérateur
Salut,

Perso je te propose de passer par du flex https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html plutôt que par du float. Je le trouve plus facile a gérer et plus robuste que le float :

<div class="container">
  <div class="droite"></div>
  <div class="gauche"></div>
</div>


.container {
  display:flex;
}
.droite{
  flex: 1 1;
  background-color: blue;
}
.gauche{
  flex: 1 1;
  background-color: red;
}


https://jsfiddle.net/Undless/b0xuaLq2/4/

A toi de voir.
Bonne journée Smiley smile
Modérateur
Integrator a écrit :
Les deux fonctionne tout à fait perso je ne pense pas assez à utiliser flexbox Smiley kneu

Oui oui absolument. Question de gout. J'ai jamais été trop fan du float je le trouve assez chiant a mettre en place (notamment à cause de la sortie du flux, ici par exemple c'est toute la section qui sort et les bloc d'en dessous vont être impactés...) mais il reste utile dans certains cas hein. J'ai mis un peu de temps à accrocher (je ne jurais que par les inline-block) mais maintenant je suis tombé amoureux du flex !

bonne soirée Smiley smile
Hello,
Merci pour votre message Smiley smile

En fait, c'est en effet intéressant ce système avec flex toutefois ce que j'ai mis en place au niveau du float fonctionne très bien. Ce que je cherche à faire maintenant et de centrer horizontalement son contenu et c'est là que je sèche... Smiley smile

Voici ce que je veux copier : https://ibb.co/iP1857
Modifié par jnce84 (11 Mar 2018 - 08:53)
Voilà ma version de ce que je pense que tu essai de faire :

<div class="container">
  <div class="align"> <!-- NOUVELLE DIV -->
    <div class="droite"></div>
    <div class="gauche"></div>
  </div>
</div>


.droite{
  width: 50%;
  height: 200px;
  background-color: blue;
  float:right;  
}

.gauche{
  width: 50%;
  height: 200px;
  background-color: red;
  float: left;
}

.align {
  width:90%;
  margin: 0 auto;
}
Merci pour ton retour Smiley smile

Est-ce que tu penses qu'on peut faire tout ça dans la seule DIV "post-photo-title-contenu" ?
En fait j'utilise ça depuis super longtemps et je vais devoir repasser sur tous mes articles Smiley smile

Merci d'avance,

<div id="main">
<div id="contenu">gauche</div>
<div id="contenu">droite</div>
</div>


Merci d'avance Smiley smile
D'un point de vue sémantique ce n'est pas bon parce que un id ne peut être utilisé qu'une seule fois. Pour une utilisation multiple il faut utiliser une class. Vois tu ou je veux en venir?

Perso je met des class partout et je garde les id pour le JS ça sera plus simple pour la suite.
Bonjour jnce84,

Je te propose une autre technique basée sur les tableaux css :
https://codepen.io/Zonecss/pen/EENaMP
#post-bloc-photo-title{
  display:table;
  width:50%;
  margin:auto;
}
.post-photo-title-contenu {
  display:table-cell;
  vertical-align:middle;
  border:1px solid red
}


Pour info : un id doit avoir une valeur unique dans la page
Bonjour
Merci beaucoup ça commence déjà à ressembler à ce que je veux faire ! Merci
Est-il possible de donner une largeur égal à chacun des 2 blocs ?
Sujet clos
Aller à