Div flottant qui déborde et vient à la ligne

**mLk92** · 03/12/2007, 13h29

Hi all,

J'ai crée un div contenant deux div en positions flottante, l'un a gauche, l'autre à droite.

Le problème est qu'en rétrécissant la page, le div de droite, passe à la ligne, ce que je ne veux pas, quel serait la solution ?

J'ai bien tenté le hr mais ça ne bloque pas. faut - il donné une hauteur spécifique ?

Merci pour vos réponses !

**pop_up** · 03/12/2007, 14h05

si tes div sont en flottant, ils ne vont pas se supperposer.

test en absolue
exemple sous IE :

Code :

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

1
2
3
4
5
6
7
8
9
 
<html>
<body>
<div>
<div style="position:absolute; left:0; top:0; background-color:red; width:400px; display:block;">toto</div>
<div style="position:absolute; right:0; top:0; background-color:blue; width:400px; display:block;">titi</div>
</div>
</body>
</html>

**mLk92** · 03/12/2007, 14h57

Envoyé par pop_up

si tes div sont en flottant, ils ne vont pas se supperposer.

test en absolue

Justement, je ne veux pas qu'ils se superposent, je voudrais juste qu'il reste l'un à coté de l'autre, j'ai un overflow qui fait en sorte qu'en cas de dépassement, il y a une scrollbar qui permet de voir l'élément quand on rétrécie la page.

**neby55** · 03/12/2007, 15h11

A mon avis, si ta 2ème div flottante (gauche ou droite ca ne change rien) revient à la ligne, c'est que tu as un soucis au niveau des largeurs occupées par ces div.

Exemple concret : si tes DIV font 202 pixels de large chacune et que leur conteneur en fait 400, alors il est normal que la seconde DIV revienne à la ligne...

**mLk92** · 03/12/2007, 15h37

Oui c'est sûr, j'ai donc testé, parce que mon conteneur était à 100% et que ca pouvais être cela.

Mais finalement non, plus qu'en mettant une taille du div conteneur plus grande ou équivalente à la somme des tailles des div en float, en plus des marges extérieur, j'ai tout de même ce retour de ligne

Est ce qu'il faut pas une taille en hauteur ?.

Voici le code:

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
div.headCriteria{
	width: 1100px;
	margin: 0px;
	padding:0px;
	}
 
.criteria{
	float: left;
	width: 620px;
	margin-right: 20px;
	}
.panier{
	float: left;
	width: 350px;
	margin: 0px;
	padding: 0px;
}

**neby55** · 03/12/2007, 16h02

C'est assez bizarre, avec ton code CSS, la div de droite reste à droite chez moi (IE6, IE7 et FF).

Voici l'HTML de test :

Code :

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

1
2
3
4
<div class="headCriteria">
	<div class="criteria">test</div>
	<div class="panier">div</div>
</div>

Pour la hauteur, elle n'est pas obligatoire dans ton cas.

**mLk92** · 03/12/2007, 16h09

Autant pour moi, j'avai mis id et pas class dans le code html

Par contre ! Cela ne fonctionne pas sous ie

J'ai toujours mon bloc qui descend malgré la taille et le hr !

**mLk92** · 03/12/2007, 16h55

J'ai résolu le problème, j'avais en fait, un div supérieur qui n'était pas bien positionné, causant des décalages au niveau des tailles, donc voilààààà

Merci pour vos réponses !

Div flottant qui déborde et vient à la ligne

Tableau en CSS

Discussions similaires

Partager

Partager