[Résolu] Problème de mise à la ligne de <div>

Bonjour à tous !

Je suis nouveau ici, et grâce à ce site super, j'ai découvert il y a une semaine le vrai fonctionnement du CSS (en dehors des trucs basiques bien sur )

Alors j'ai décidé de convertir mon site en CSS, plutot que de laisser pleins de <table> qui alourdissent la page...

Mais voila mon problème :
J'ai deux div cote-à-cote, un "pub-horizontal" et un "content" (une pub et le contenu de la page)
A l'intérieur du div "content" j'ai des div "object" qui représentent des blocs distinct les uns des autres.
A l'intérieur de chacun de ces "object" j'ai des div "object-img" (mis a gauche avec float:left) "object-name" et "object-descrip".
En gros ça donne ça :
http://img193.imageshack.us/img193/9611/00006zp.jpg

Le problème c'est que chaque nouveau "object" commence à droite de l'image du précédent "object" :
http://img169.imageshack.us/img169/6001/00006ie.jpg

Je cherche alors à mettre un séparateur <div id="spacer"> avec un
.spacer {
clear: both;}
mais ça me descend mes "object" sous le "pub-vertical" !

Je ne sais pas quoi faire

Merci d'avance pour une réponse

EDIT: Voila mon html :

	<div id="pubvertical">
		:: Pubs ::
	</div>
	<div id="content">
			<h1>Titre (h1)</h1>
		<div id="object">
			<div id="object-img"><a href="http://ptdrire.free.fr/"><img src="htp://truc.jpg" alt="image.jpg" width="80" height="50" border="0"></a></div>
			<div id="object-name">Nom de l'objet</div>
			<div id="object-descrip">Description de l'objet</div>
		</div>
		<div class="spacer">&nbsp;</div>
		<div id="object">
			<div id="object-img"><a href="http://ptdrire.free.fr/"><img src="htp://truc.jpg" alt="image.jpg" width="80" height="50" border="0"></a></div>
			<div id="object-name">Nom de l'objet</div>
			<div id="object-descrip">Description de l'objet</div>
		</div>
	</div>

Et mon CSS :

div#pubvertical {
	float: left;
	margin: 5px 0px 5px 10px;
	width: 120px;
	padding: 0px 5px 0px 0px;
	border-right: 1px solid #D5D9E2;
	text-align: center;
	font-size: 10px;}

div#content {
	margin: 20px 10px 10px 145px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	font-size: 13px;}

div#object {
	display: block;
	margin: 10px 70px 10px 70px;
	width: 480px;
	padding: 0px 0px 0px 0px;
	text-align: left;}

div#object-img {
	float: left;
	margin: 0px 0px 0px 0px;
	width: 100px;
	height: 100px;
	text-align: center;
	vertical-align: middle;}

div#object-name {
	margin: 0px 0px 0px 10px;
	font-size: 16px;
	text-align: left;
	color: #000000;}

div#object-descrip {
	margin: 10px 0px 0px 10px;
	font-size: 13px;
	text-align: left;
	color: #333366;}

.spacer {
  clear: none;}

EDIT2 : J'ai mis un exemle de mon problème ICI.
J'espère que ça vous aidera à comprendre
Modifié par k-net (03 Oct 2005 - 18:47)

hello
n'as tu pas confondu "id" et "class" ?
car dans ton css tu mets .spacer alors que tu as mis id ="spacer" ...?

salut K-net et bienvenue sur le forum

Juste un petit truc pour ton object // object-name // objet-descrip

je te conseillerais plutôt d'utiliser des listes de définitions qui m'ont l'air plus appropriées dans ce contexte. Elles se manipulent en plus assez facilement pour ce que tu veux faire
je te donne l'adresse d'un très bon article de pompage dessus

bonne découverte
Modifié par GuizBizet (29 Sep 2005 - 11:32)

Tout d'abord merci pour ces réponses rapides

lambdicta > Non regarde plus haut j'ai mis class="spacer"
Et ça marche ! Ca marche même trop : tout ce qui est derrière le spacer dans le html se retrouve en-dessous du div "pub-vertical" car ce dernier est en float: left

GuizBizet > Merci pour ce lien, je vais tout de suite y jeter un oeil
PS: j'ai regardé, ça a l'air d'être exactement ça qu'il me faut.
J'essaie et je vous tiens au courant

Merci !
Modifié par k-net (29 Sep 2005 - 17:48)

Hé non malheuresement ça fait (presque) la même chose
--> vous pouvez voir ICI

J'ai regardé sous IE, ça marche très bien, mais en fait je préfèrerai le contraire (que ça marche sur FF et pas sur IE) lol

Je suis désespéré
Que faire ?

Bonsoir,

Sur la base de la CSS et du code du premier message, ajouter overflow: auto à div#object.

Les conteneurs s'étendront en hauteur et engloberont les images, empêchant celles-ci de se repousser vers la droite.

(IE, en raison d'un bug, englobe les flottants dès lors que le conteneur est dimensionné, ou a l'une ou l'autres des propriétés qui lui confèrent le layout. D'où le résultat dans ce navigateur)
Modifié par Laurent Denis (29 Sep 2005 - 19:52)

Waou ça marche à merveille !!!

Un grand merci à toi Laurent Denis, mais aussi à ce super site, franchement grâce à lui j'ai appris énormément en peu de temps c'est super !
Bravo et encore merci !

lol je viens de me rendre compte que maintenant que ça marche sur FF, sa déconne sur IE (voir ICI avec IE)

Ah vraiment ce IE...

J'ai essayé de remplacer overflow: auto par overflow: hidden mais ça ne change rien.
Que faire ?

Garder le overflow auto. Mais l'annuler pour IE 5.x-6.0 windows dans une CSS en commentaires conditionnels (overflow: visible). Voir la FAQ du forum sur les commentaires conditionnels.

Ok encore merci pour cette réponse rapide

Bon je sais que je vais vraiment passer pour un newbie, et je suis désolé de vous embêter, mais je n'y arrive pas.

Voila ce que j'ai mis, mais ça na rien changé pour IE :

<head>
<link rel="stylesheet" type="text/css" href="page.css">
<!--[if IE]>
<style type="text/css">
dl.liste {
	overflow: visible;}
</style>
<![endif]-->
</head>

Personne n'a d'idée ?

Peut-on mettre des commentaires conditionnels dans une CSS ?

J'ai exactement le même problème que toi, et je sèche...
Je ne comprends le comportement du spacer, si on lui donne une taille 50%, il ne regarde que son conteneur et se réduit de 50% de la taille de ce conteneur.
Et si on lui applique clear:both, il va voir à côté de son conteneur si il y a un float.

Quelqu'un aurait-il la réponse ?

Bonsoir,

k-net : lorsque tu as implémenté la solution que je t'ai donné, tu as supprimé au passage la largeur affecté à ton conteneur (.liste). En faisant cela, il a perdu dans IE la qualité de haslayout qui lui confère le fait d'être dimensionné. Dans IE, c'est ce haslayout qui lui permet de s'étendre à ses enfants flottants. Voir http://test.blog-and-blues.org/haslayout/tests/float1.html

Pour utiliser le overflow:auto dans les navigateurs conformes, laisse la largeur de .liste, ou bien rétabli le haslayout dans IE5.x et 6.0 à l'aide de :

<!--[if IE]>
<style type="text/css">
dl.liste {
	zoom: 1;
	}
</style>
<![endif]-->

Le overflow:visible pour IE est alors inutile.

energizer : indique une url, en créant un nouveau sujet. Ton problème de clear est également lié au haslayout, mais différemment. (Apparemment, il s'agit de http://test.blog-and-blues.org/haslayout/tests/float2.html : dans IE Windows, un clear dans un conteneur doté de layout n'agit pas sur les flottants extérieurs à ce conteneur. Ce bug n'a pas de contournement connu)
Modifié par Laurent Denis (01 Oct 2005 - 19:49)

Merci Laurent Denis, c'est impec, ça marche super bien !!!

Je suis impressionné par tes connaissances (et celles de tous les autres ), et ça fait plaisir que vous aidiez les noobs comme moi, en plus ça nous permet d'apprendre plein de trucs !

Merci !!
Je n'ai pas utilisé tout à fait cette solution mais les liens indiqués m'ont offert celle qu'il me fallait.
Je crois que ça mérite un [résolu] non ?

Julien

Oui, c'est fait