Positionnement vertical

Bonjour,
Je finalise le site mais j'ai encore deux problèmes.
Merci beaucoup de votre aide :

L'adresse de mon site non encore officiel ni validé :
http://www.fridaetnous.fr/spip/spip2/spip3/

1 - Je n'arrive pas à positionner ma boite-conteneur_sommaire en haut de ma boite contenu, à la même hauteur que ma col de gauche et de droite. J'ai mis la boite en rouge pour plus de lisibilité. Mes css :

#gauche,
#contenu,
#droite {
 float: left;
  height: auto !important;
 height: 300px;
 min-height: 300px; 
 padding-top: 30px; 
 padding-bottom: 20px;
} 

et

 	
.boite_conteneur_sommaire
	 	{	
	 width: auto;
	 height: 225px;
	 background-color: red;
	 margin-top: 0px;
	 
	 padding-top: 0px;
	 margin-bottom: 30px; 
	}
 

Je vois bien dans mon contenu margin-bottom: 30px; mais elle joue pour la colonne de gauche et de droite donc je ne comprends pas pourquoi cela fonctionne autrement.

Le html de ma page sommaire :

	<div id="contenu">
			
		[(#REM)  articles avec mot clé edito]
		<B_articles_recents>
					
			<div class="boite_conteneur_sommaire">
			<div class="boite_unegauche">
				<div class="unegauche_header"> <h2> A la Une </h2> </div> <p> </p>
			
					<BOUCLE_articles_une(ARTICLES){lang?} {titre_mot="une"} {par date}{inverse} >
				<h2> <a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h2>
				<div class="boite_image_unegauche"> 
				
								[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,150})] </div><p></p>
								<div class="boite_adroitedelimage">
					
					<div class="#EDIT{intro} introduction entry-content">[(#INTRODUCTION|couper{80})]</div>
					<div class="lire-suite"><a href="#URL_ARTICLE" title="...<:suite:> : [(#TITRE|supprimer_numero|attribut_html)]" ><:suite:></a></div>
				</div>
				
				</BOUCLE_articles_une>
		 </div>
			<div class="boite_unedroite"> <div class="breves"> <h2>En bref </h2> </div> <B_breves>
		
			
			
				<BOUCLE_breves(BREVES) {par date}{inverse} {id_rubrique=2}{0,5}>
				[(#DATE|affdate_jourcourt) &ndash; ]<a href="#URL_BREVE">#TITRE</a>#TEXTE <div class="bordure"> </div>
				</BOUCLE_breves>
			
		
		</B_breves>
			</div>
			</div>

2 - Mon deuxieme problème concerne l'affichage différent sous IE6 et mozilla de la ligne rouge sous le menu. Sous Moxilla il y a un espace entre le menu et la ligne ce qui me va et sous IE c'est collé. J'ai mis un padding-top: 3px;

 .ligne_entete  hr
 {
 float: left;
 padding-top: 3px;
 color: #ab0f14;
 width: 1060px;
 background-color: #ab0f14;
height: 3px;
}

Modifié par clarinclarin (26 Jan 2011 - 16:56)

bonjour,

Un reset des marges internes sur #contenu devrait suffire:

#page #contenu {padding:0;}

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Merci beaucoup, la remise à 0 du padding de contenu à résolu mon problème.

Désolée pour le non respect des règles que j'avais lues mais mal interprêtées. J'ai réédité le message.