Espace horizontal entre 2 div

Bonjour,
Je rencontre un souci d'espace entre 2 div.

L'espace apparait entre le div de class "horaires" et le premier div de class "jours".

Cependant cet espace disparait lorsque je réduit la fenêtre de mon navigateur.

Pour information, j'utilise le framework Prado.

Voici le code HTML du template envoyé à Prado

	<div class="programmes">
		<!-- Boucle sur les semaines et les programmes -->
		<com:TRepeater ID="WeeklyRepeater" OnItemDataBound="dataWeekRepeater">
		<prop:HeaderTemplate>
		<div class="horaires">
			<div class="tranche">&nbsp;</div>
			<div class="tranche"><span class="dotted">08:00</span></div>
			<div class="tranche"><span class="dotted">09:00</span></div>
			<div class="tranche"><span class="dotted">10:00</span></div>
			<div class="tranche"><span class="dotted">11:00</span></div>
			<div class="tranche"><span class="dotted">12:00</span></div>
			<div class="tranche"><span class="dotted">13:00</span></div>
			<div class="tranche"><span class="dotted">14:00</span></div>
			<div class="tranche"><span class="dotted">15:00</span></div>
			<div class="tranche"><span class="dotted">16:00</span></div>
			<div class="tranche"><span class="dotted">17:00</span></div>
			<div class="tranche"><span class="dotted">18:00</span></div>
		</div> <!-- fermeture de horaires --></prop:HeaderTemplate><prop:ItemTemplate>
		<div class="jours">
			<div class="jour"><%#$this->Data %></div><com:TRepeater ID="ShedulesRepeater"><prop:ItemTemplate><div class="programme" style="left:<%#$this->Data['left'] %>%; width:<%#$this->Data['width'] %>%; background:<%#$this->Data['color'] %>; z-index:2"><%#$this->Data['short_name'] %> <%#$this->Data['time_start'] %>-<%#$this->Data['time_end'] %></div></prop:ItemTemplate></com:TRepeater>
		</div> <!-- fermeture de jours --></prop:ItemTemplate></com:TRepeater>
	</div> <!-- fermeture de programmes -->	

Voici ma feuille de style :

div.programmes{
}

div.horaires{
    float: left;
    width: 100%;
    border: 1px solid #00aacb;
}

div.tranche{
    width: 8.33%;
    float: left;
}

span.dotted {
    border-left-width: 1px;
    padding-left: 3px;
    border-left-style: dotted;
}

div.jours {
    width: 100%;
    clear: both;
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-right-width: 1px; 
    border-top-width: 0px; 
    border-style: solid;
    border-color: #00aacb;    
}

div.jourj {
    padding-left: 3px;
    background: #cc0000;
}
div.jour {
    padding-left: 3px;
}

div.programme {
    position:relative; 
    padding-left: 3px;
}

Remarque : Lorsque j'applique directement dans mon template le code généré par le framework, je ne rencontre pas de problème d'espace.

Voici le code html généré par le framework "Prado".

<div class="programmes">
		<!-- Boucle sur les semaines et les programmes -->
		
		<div class="horaires">
			<div class="tranche">&nbsp;</div>
			<div class="tranche"><span class="dotted">08:00</span></div>
			<div class="tranche"><span class="dotted">09:00</span></div>
			<div class="tranche"><span class="dotted">10:00</span></div>
			<div class="tranche"><span class="dotted">11:00</span></div>
			<div class="tranche"><span class="dotted">12:00</span></div>
			<div class="tranche"><span class="dotted">13:00</span></div>
			<div class="tranche"><span class="dotted">14:00</span></div>
			<div class="tranche"><span class="dotted">15:00</span></div>
			<div class="tranche"><span class="dotted">16:00</span></div>
			<div class="tranche"><span class="dotted">17:00</span></div>
			<div class="tranche"><span class="dotted">18:00</span></div>
		</div> <!-- fermeture de horaires -->
		<div class="jours">
			<div class="jour">lundi 23/07</div>
		</div> <!-- fermeture de jours -->
		<div class="jours">
			<div class="jour">mardi 24/07</div>
		</div> <!-- fermeture de jours -->
		<div class="jours">
			<div class="jour">mercredi 25/07</div>
		</div> <!-- fermeture de jours -->
		<div class="jours">
			<div class="jour">jeudi 26/07</div>
		</div> <!-- fermeture de jours -->
		<div class="jours">
			<div class="jour">vendredi 27/07</div>
		</div> <!-- fermeture de jours -->
		<div class="jours">
			<div class="jour">samedi 28/07</div>
		</div> <!-- fermeture de jours -->
		<div class="jours">
			<div class="jour">dimanche 29/07</div>
		</div> <!-- fermeture de jours -->
	</div> <!-- fermeture de programmes -->	

Je n'y comprend plus rien.
Toute aide sera le bienvenue.
Merci.
Modifié par chriscosson (24 Jul 2012 - 14:43)

Salut,

tu as un lien pour nous montrer la chose ?

Non malheureusement. L'appli n'est pour l'instant pas disponible...