[Résolu] Div qui s'adapte en fonction de celle d'à coté

Bonjour à tous,

J'ai 3 div
La div principale qui contient 2 div
Celle de gauche a plus de hauteur que celle de droite
J'aimerai que celle de droite prenne la même hauteur que celle de gauche, donc qu'elle s'adapte

Mon code html5

<section id="centre">
<article>kkkk</article>
<aside>jjjj</aside>
</section>

Mon css :

#centre {
	background-color:#FFFFFF;
	width:996px;
	overflow:hidden; 

}

article {
	float:left;
	width:690px;
	padding:20px;
	background-color:#99FF99;
	overflow:hidden;
}

aside {
	float:left;
	width:200px;
	padding-top:20px;
	overflow:hidden;
        background-color:#e6d6d6; 
}

j'aimerai que aside prenne la même hauteur ie qu'elle s'adapte a article

je sèche complètement !

pourtant j'ai bien mis overflow:hidden; sur #centre

quelqu'un pourrait il m'aider?

merci
Modifié par oceane751 (24 Feb 2013 - 16:32)

Bonjour,

En css je ne vois pas mais peut-être en Javascript.

suis sur qu'en CSS c'est possible

j'ai mis des height:auto; au 3 élements et rien...

Essayez ça : lien

Huuuummm de l'anglais...

Et oui il faut s'y mettre

sinon je vous donne un code tout fait à vous de l'adapter:

* {
	padding: 0;
	margin: 0;
}
#wrapper {
	margin: 10px auto;
	width: 600px;
}
#wrapper #main_container {
	width: 590px;
	padding: 10px 0px 10px 10px;
	background: #CCC;
	overflow: hidden;
	border-bottom: 10px solid #CCC;
}
#wrapper #main_container div {
	float: left;
	width: 263px;
	background: #999;
	padding: 10px;
	margin-right: 10px;
	border: 1px solid #000;
	margin-bottom: -1000px;
	padding-bottom: 1000px;
}
#wrapper #main_container #right_column {
	background: #FFF;
}

<div id="wrapper">
  <div id="main_container">
    <div id="left_column">
      <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
    </div>
    
    <div id="right_column">
      <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
      <p>&nbsp;</p>
      <p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
      <p>&nbsp;</p>
      <p>Is there some () code to accomplish this?  </p>
    </div>
  </div>
  <!-- MAIN CONTAINER --> 
</div>
<!-- WRAPPER -->

Modifié par rodolpheb (24 Feb 2013 - 17:07)

J'avais complètement omis de mentionner le modèle tabulaire que j'utilise fréquemment.

Une solution beaucoup plus simple:

<section >
<div class="row">
<article>kkkk</article>
<aside>jjjj</aside>
</div>
</section>

section {
    display:table;
	border-collapse:separate;
	border-spacing:5px;
}
.row {
    display:table-row;
}
article, aside {
    display:table-cell;
	width:360px;
	background-color:#999;
	
}

merci pour ta réponse
entre temps j'ai trouvé ça :

article {
	background-color: #dbeaf9;
	width: 790px;
	display: table-cell;
}



aside{
	background-color: #638cde; 
	color: #ffffff;
	width: 207px;
	display: table-cell;
}

utilisation de display: table-cell;

ah ba on a trouvé la même chose

merci en tout cas d'avoir pris du temps pour moi!
bonne soirée et peut être à bientôt