18073 sujets

Questions générales et questions de débutants

Css : 2 blocs de mêmes hauteurs

Bonsoir tout le monde!

J'ai cherché pas mal de temps pour obtenir un résultat me satisfaisant, mais je n'ai encore rien trouvé! Je me suis dit que vous pourriez peut-être m'aider !

Ce problème est classique, je sais , mais j'ai testé une technique qui me semble raisonnable mais qui malheureusement ne fonctionne pas!

Le but : Obtenir 2 blocs de même hauteur quelque soit leur contenu
Le problème :Ca ne va pas
Ma "solution" : me baser sur les gabarits de mise en page proposé sur ce site pour atteindre mon but c a d 2 blocs flottant avec un footer (en vers dégueu sur l'image) avec la propriété clear: both

#home_spectacles{
	background-color:#879A49;
	width:48%;
	float:left;
	text-align:justify;
	padding:5px;
}
#home_acteur{
	background-color:#BF4341;
	width:48%;
	float:right;
	text-align:justify;
	padding:5px;
}
#egalisateur{
clear:both;
width:100%;
height: 30px;
background-color: #99CC99;
}



<div id="home_spectacles">
<h2><a href="index_spectacles.htm">Pour des animations et spectacles originaux!</a></h2>
<p>Vous cherchez une animation originale pour organiser une folle apr&egrave;s-midi avec des enfants ou grands enfants de 7 à 77 ans? Je vous propose 21 spectacles tous autant divertissants les uns que les autres...<br/>
<a href="categories.htm">Allez donc jeter un coup d'oeil à la liste des spectacles...</a></p>
<p class="random_spec">Un spectacle au hasard: 
	<?php
	connect_db();
	$sql='SELECT id, nom, nom_image FROM spectacles ORDER BY RAND() LIMIT 1';
	$res=request($sql);
	if (mysql_num_rows($res)==0)
	{
	}
	else
        {
	while ($spectacle=mysql_fetch_array($res))
	{
	?>
<a href="spectacle<?php echo $spectacle['id']; ?>.htm"><?php echo $spectacle['nom']; ?><br/>
	<?php 
	if (file_exists("img/photos/spectacles/small/".$spectacle['nom_image']))
	{
	echo'<img src="img/photos/spectacles/small/'.$spectacle['nom_image'].'" alt="photo de ce spectacle" />';
	}
	else
	{
	echo'<img src="img/photos/spectacles/small/unknown.jpg" alt="pas de photo" />';
	}
	echo '</a>';
	}
	}
	mysql_close();
	?>
</p>
</div>
<div id="home_acteur">
<h2><a href="index_acteur.htm">Mais aussi un acteur de talent!</a></h2>
<p>Je suis &eacute;galement à la recherche de castings et de tournages. Je n'en suis pas à ma premi&egrave;re expérience et j'ai d&eacute;j&agrave; tourn&eacute; dans plusieurs court-m&eacute;trages... Allez donc voir mon book, avec des photos et des extraits de film... Je pr&ecirc;te également mes services à la publicit&eacute;.<br/>
<a href="index.acteur.htm">Cliquez ici pour d&eacute;couvrir mon c&ocirc;t&eacute; acteur</a>, ainsi que mon exp&eacute;rience.<br/>
</p>
</div>
<div id="egalisateur">&nbsp;</div>


Je ne vois pas ou se situe le problème... je ne fais pourtant qu'appliquer le code des gabarit de mise en page proposé sur ce site... Smiley sweatdrop

Bref, j'ai besoin que quelqun m'éclaire qque peu!


Merci d'avance Smiley cligne
Modifié par SpeedMan (02 Jan 2006 - 13:10)
Bonjour,

La propriété clear ne peut pas avoir ici l'effet que tu attends. Son seul effet est d'obliger le div id="egalisateur" à se placer plus bas que le flottant le plus long, ce qui permet à ton arrière-plan gris de s'étendre jusqu'en bas de la page. Elle n'a aucun effet sur la hauteur des flottants, qui ne dépend que de leurs contenus respectifs.

Dans tous les cas de figures, la hauteur d'un élément flottant sera indépendante de la hauteur des flottants voisins.

Pour réaliser cet effet dans ce design, passer par un display:table-cell et oublier IE Windows (exemple : http://test.blog-and-blues.org/colonnes/ )
Modifié par Laurent Denis (31 Dec 2005 - 05:24)
Bonjour,

Je pensais que ça irait sans problème, j'ai eu tord !

Le problème est réglé sous FF mais rien ne change sous IE...

Voici mon code HTML : 


<div id="tableau">
  <div id="home_spectacles">
     <h2><a href="index_spectacles.htm">Pour des animations et spectacles originaux!</a></h2>
     <p>Vous cherchez une animation originale pour organiser une folle apr&egrave;s-midi avec des enfants ou grands enfants de 7 à 77 ans? Je vous propose 21 spectacles tous autant divertissants les uns que les autres...<br/>
     <a href="categories.htm">Allez donc jeter un coup d'oeil à la liste des spectacles...</a></p>
     <p class="random_spec">Un spectacle au hasard: 
        <?php (du code php) ?>
     </p>
  </div>
  <div id="home_acteur">
     <h2><a href="index_acteur.htm">Mais aussi un acteur de talent!</a></h2>
     <p>Je suis &eacute;galement à la recherche de castings et de tournages. Je n'en suis pas à ma premi&egrave;re expérience et j'ai d&eacute;j&agrave; tourn&eacute; dans plusieurs court-m&eacute;trages... Allez donc voir mon book, avec des photos et des extraits de film... Je pr&ecirc;te également mes services à la publicit&eacute;.<br/>
     <a href="index.acteur.htm">Cliquez ici pour d&eacute;couvrir mon c&ocirc;t&eacute; acteur</a>, ainsi que mon exp&eacute;rience.<br/>
     </p>
  </div>
</div>
<div id="egalisateurbas">&nbsp;</div>


Et voici mon css : 


#tableau, #egalisateurbas{
display:table;
width:100%;
}
#home_spectacles, #home_acteur{
display:table-cell;
height:100%;
}
#home_spectacles{
	background-color:#879A49;
	width:48%;
	float:left;
	text-align:justify;
	padding:5px;
}
html>body #home_spectacles {
float: none;
}
#home_acteur{
	background-color:#BF4341;
	width:48%;
	text-align:justify;
	padding:5px;
}
#egalisateurbas{
clear:both;
height: 30px;
}


Si qqun pouvait m'éclairer ce serait vraiment sympa de sa part!!

Merci d'avance
Modifié par SpeedMan (02 Jan 2006 - 13:18)
Sujet clos
Aller à