Aligner 2 div

Version imprimable

Aligner 2 div

Bonjour, la question paraît toute bête mais à force de me casser la tête je poste...
Code:

1 2 3 4 5 6 7 8 <div class="sporttopoddsResultLine odd"> <div class="sporttopoddsResultLineLeft"> <div class="sporttopoddsResultLineDate">vendredi 24 avril 20:30</div> <div class="sporttopoddsResultLineEvent">Lyon - Paris St Germain</div> </div> <div class="sporttopoddsResultLineOdds"><span>1.8</span><img href="themes/default/images/star1.png" /><span>3.35</span><span>5.5</span></div> </div>
Je voudrais juste que mes div sporttopoddsResultLineLeftet sporttopoddsResultLineOdds soient alignés dans mon div sporttopoddsResultLine
Pour le moment j'ai un saut de ligne que j'arrive pas à corriger :?

Dans mon fichier css j'ai :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .sporttopoddsResultLine { min-height:40px; clear:both; width:100%; } .sporttopoddsResultLineLeft { width:60%; float:left; padding:5px; } .sporttopoddsResultLineOdds { width:40%; float:left; }

23/04/2009, 12h45
devyan

Ah ! La fameuse question que tout le monde s'est déjà posé...

Mais pourquoi 60 + 40 > 100 ? :P

Tu dois avoir un arrondi qui traîne... Est-ce que lorsque tu agrandis/rétrécis la largeur de la fenêtre de ton navigateur le problème existe TOUT LE TEMPS ?

EDIT : :oops: Je n'avais pas vu... le "padding:5px" sur le DIV à 60% (le problème vient de là)

Si tu veux utiliser les dimensions en % il ne faut pas avoir de margin/padding sur cet élément. Par contre tu peux ajouter un autre DIV dendans qui lui aura le padding...
23/04/2009, 12h50
remika

ba en fait en suivant ton indication 60+40 > 100 j'ai mis 58 et 38 et là magiquement ça marche :D

Merci !

Essaye plutôt ceci, c'est plus "propre" :D

Code:

1
2
3
4
5
6
7
8
9
10
<div class="sporttopoddsResultLine odd">
	<div class="sporttopoddsResultLineLeft">
	<div class="pourlepadding">
		<div class="sporttopoddsResultLineDate">vendredi 24 avril 20:30</div>
		<div class="sporttopoddsResultLineEvent">Lyon - Paris St Germain</div>
	</div>
	</div>
	<div class="sporttopoddsResultLineOdds"><span>1.8</span><img href="themes/default/images/star1.png" /><span>3.35</span><span>5.5</span></div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.sporttopoddsResultLine {
	min-height:40px;
	clear:both;
	width:100%;
}

.sporttopoddsResultLineLeft {
	width:60%;
	float:left;
	/*padding:5px;*/
}

.pourlepadding {
	padding: 5px;
}

.sporttopoddsResultLineOdds {
	width:40%;
	float:left;
}

23/04/2009, 13h02
remika

ok je fais ça là, merci du conseil :D