[CSS] HR et clear dans une colonne centrale.

**dhjapan** · 06/04/2006, 12h42

Bonjour,
j'ai fais un layout de 3 colonnes : "left", "right" et "center", avec un float pour les colonne "right " et "left".
Dans ma colonne "center" j'utilise un float:left pour mettre en page mes images, le texte se place autour, et j'utilise un clear:left pour mes HR pour séparer mes contenus...
Le problème c'est que le clear:left de mes HR "clear" aussi le float de mes colonnes.
http://uoa7.free.fr/CSS-test/hrToClearFloats.html
Il n'y a pas un moyen pour que mes hr ne "clear" que le float des images qui sont dans la même div qu'eux ?

Merci d'avance

**franculo_caoulene** · 06/04/2006, 15h09

Salut,

Mets tout simplement ton image dans ta balise <p>

**dhjapan** · 06/04/2006, 16h59

Merci,

oui mais le <hr /> a aussi un rôle esthetique.. et j'en ai vraiment besoin pour sectionner mon contenu. Je ne peux vraiment pas avoir un <hr /> qui soit chevaucher par une image.
Ceci dit j'peux toujours dire à mon client de contrôler son contenu. mais bon c'est moins class !)

**franculo_caoulene** · 06/04/2006, 17h04

Tu as essayé ce que j'ai dit? Car ton <hr /> étant à l'extérieur de <p> il ne peux pas le chevaucher tant qu'il reste dans le flux.

**dhjapan** · 06/04/2006, 17h06

Oui j'ai testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>TEMPLATE</title>
	<style type="text/css">
	 *{
	   margin: 0;
	   padding: 0;
	   border: 0;
	   font-family: Arial;
   }
    #global {
      width: 600px;
    }
    #left {
      float: left;
      width: 100px;
      height: 400px;
      background: yellow;
    }
    #right {
      float: right;
      width: 150px;
      height: 400px;
      background: yellow;
    }
    #center {
      margin: 0 150px 0 100px;
    }
    #center img {
      float: left;
      display: block;
      width: 100px;
      height: 200px;
      border: solid 1px #999;
      background: #CCC;
    }
    #center hr {
      clear: left;
      color: red;
      background: red;
      height: 3px;
    }
  </style>
</head>
 
<body>
 
	<div id="global">
    <div id="left">LEFT COL</div>
    <div id="right">RIGHT COL</div>
    <div id="center">
      <p><img />&lt;- here a float left IMG.<br />Below I use an HR to clear this float so I can add some content whitch won't be display beside the IMG.</p>
      <p>But it appears that this HR also clears the Left &amp; Right column float...<br />Is there any way It could only clear the IMG float ?</p>
      <hr />
      <p>But it appears that this HR also clears the Left &amp; Right column float...<br />Is there any way It could only clear the IMG float ?</p>
    </div>
  </div>
 
</body>
 
</html>

Mais dès que j'utilise un clear dans mon #center ca me renvoit en dessous de mes 2 colonnes #right et #left.

Ouai : en fait pour simplifier c'est ca mon problème : "dès que j'utilise un clear dans mon #center ca me renvoit en dessous de mes 2 colonnes #right et #left." .. pourquoi ? et comment eviter ca ?

**franculo_caoulene** · 06/04/2006, 17h35

La hauteur de l'image est toujours fixe?

**ilood** · 06/04/2006, 17h45

Salut

Essai de mettre un overflow: auto sur ton div id="center".
Ca permet de séparer les flux. Il existe d'autres techniques (incompatibles IE d'après mes souvenirs), mais je n'ai plus l'url de l'article.

**dhjapan** · 06/04/2006, 17h48

Non ... le principe c'est que le contenu du site soit générer dynamiquement... la logique doit être le plus simple possible :

- j'ajoute un paragraphe
- j'ajoute une image
- j'ajoute un paragraphe
- j'ajoute un paragraphe
- je change de section, j'ajoute un <hr />
- j'ajoute un paragraphe
etc ...

j'ai créer une page pour l'exemple : http://uoa7.free.fr/CSS-test/hrToClearFloats.html

C'est vraiment un problème pour moi, ca voudrait dire qu'a partir du moment ou j'ai 1 colonne defini en float, je ne peux plus utiliser de float dans ma colonne principale dans le sens où je ne peu pas utiliser de clear .. J'avais jamais réalisé ca avant.

**franculo_caoulene** · 06/04/2006, 17h48

Ah oui tiens! Je ne dirais pas "joli" mais "pratique".

**dhjapan** · 06/04/2006, 17h51

ilood : nan ... overflow: auto fait carrement disparaitre le contenu de ma colonne #center sous FireFox ... et j'ai un bug bizarre avec IE (le contenu avant le <hr /> est invisible...)

Merci quand même