Clear, float, plusieurs blocs.

Bonjour,

J'ai un petit problème de positionnement de mes blocs et je me mèle les pinceaux entre clear et float.
J'ai fais une capture d'ecran de ce que je veux.


J'aimerai que le troisième bloc à droite se pose au niveau de la ligne bleu, des deux autres blocs à gauche.
Ca m'enleverai une épine du pied si vous pouviez m'aider.

<div class="bloc" style="float:left;"><?php include('titrex.inc'); ?></div>
<div class="bloc">TITRE 1<br></div>
<div class="bloc" ><?php include('titre1.inc'); ?></div>
<div class="bloc" style="float:left;">TITRE 2<br></div>
<div class="bloc" style="clear:left;float:left;"><?php include('titre2.inc'); ?></div>
<div class="bloc" >TITRE 3<br></div>
<div class="bloc" style="float:left;clear:none;"><?php include('titre3.inc'); ?></div>
<div class="bloc" >TITRE 4<br></div>
<div class="bloc" ><?php include('titre4.inc'); ?></div><br>

Modifié par Oziris (16 Dec 2011 - 22:05)

Tes div sont vides sur le dessin, c'est dur de s'y retrouver par rapport au code

En gros, il faut que tu positionnes tes blocs ligne par ligne, comme dans un tableau, et faire un clear:right; sur le dernier élément de la ligne ou clear:left; sur le premier de la ligne suivante..

[bloc float:left;] [bloc float:left;] [bloc float:left; clear:right;]
[bloc float:left;] [bloc float:left;] [bloc float:left; clear:right;]


Pourquoi ne pas utiliser de tableau sinon ?

Ou bien fait de plus gros conteneur : tu alignes cote a cote 3 blocs et dans chacun tu place tes éléments titres etc...

bonjour,

sans doctype ni contenu html ni feuille de style , difficile de voir ou tu te mêles.

Sur le fond, de multiple float et des clears c'est instable et hasardeux.

Des float bien utilisé et éventuellement des conteneurs pour les groupé , ça peut aider.

cordialement.

Rien à voir, mais attention à l'extension ".inc" qui est souvent directement accessible et permet de voir le code source de la page en question (y compris si c'est du PHP).

Je n'ai pas vraiment réussi avec vos différentes réponses, donc j'ai amélioré le rendu.

L'intérêt pour moi de rester avec float et clear sans tableau c'est de pouvoir être redimensionnable si la fenêtre diminue, et j'y tiens.

Voici le code :

<div class="bloc" style="float:left;"><?php include('titre.inc'); ?></div>
<div class="bloc" >CONTACT<br></div>
<div class="bloc" ><?php include('contact.inc'); ?></div>
<div class="bloc" style="float:left;clear:left;">PROJETS<br></div>
<div class="bloc" style="float:left;clear:left;"><?php include('projet.inc'); ?></div>
<div class="bloc" >TEXTES<br></div>
<div class="bloc" ><?php include('textes.inc'); ?></div>
<div class="bloc" >CV<br></div>
<div class="bloc" ><?php include('cv.inc'); ?></div><br>

et le css :

body{padding:15px;margin:0;color:#111;font-family:arial,Helvetica,sans-serif;font-size:11px;}.bloc{padding:15px;width:460px;-moz-column-count:2;-moz-column-gap:29px;-o-column-count:2;-o-column-gap:29px;-webkit-column-count:2;-webkit-column-gap:29px;column-count:2;column-gap:29px;}
*{border:1px solid red;}

Modifié par Oziris (16 Dec 2011 - 22:06)

J'ai eu ma réponse, il fallait créer de nouveaux div pour repartir les blocs en colonne.
Merci à vous