28172 sujets

CSS et mise en forme, CSS3

Deux div de même hauteur

Bonjour,

J'ai un petit soucis avec 2 div que je voudrais de la même hauteur sans justement fixer une hauteur.

J'ai un div droit qui contient le contenu et un gauche ou se trouve mon menu avec un background repeat-y. Et le contenu étant différent d'une page a lautre, je voudrais que le div gauche(background-repeat-y) puisse suive la hauteur du div droit!

Est-ce que vous avez des suggestion SVP!

merci beaucoup!

Je vous laisse le code css de mes deux div:
}	
#droit{
	background-image:url(images/coin-page.jpg);
	background-repeat:no-repeat;
	background-position:top right;
	float: left;
	width: 838px;
	height: 1500px;
	margin-left: 68px;
	background-color:#FFFFFF;
}	
#gauche{
	float: left;
	background-image:url(images/menubg.gif);
	background-repeat: repeat-y;
	width:280px;
	height: 1500px;

Modifié par kimy (14 Feb 2010 - 22:54)
Une petite technique que j'aime bien mais qui fonctionne dans IE6-7 ( ça dépend, j'avais testé avec un margin-bottom négatif de -1000000px et ça fonctionnait pas mais avec -10000px ça fonctionne et j'ai aucune idée pourquoi )


<div id="wrapper">
    <div id="content">
        <ul>
        	<li>a</li>
            <li>v</li>
            <li>b</li>
            <li>d</li>
        </ul>
    </div>
    <div id="sidebar">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>





#wrapper {
    margin: 0 auto;
    overflow: hidden;
    width: 500px;
}
 
#content, #sidebar {
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
 
#content {
    float: left;
    width: 300px;
	background:green;
}
 
#sidebar {
    float: left;
    width: 200px;
	background:red;
}

Modifié par Sorano (15 Feb 2010 - 13:59)
Sujet clos
Aller à