28173 sujets

CSS et mise en forme, CSS3

Height : 100% ou min-height : 1px ou min-heignt 100%

Bonjour a tous,
Je suis nouveau sur ce forum, mais je peux vous dire que j'ai lu ce forum en long en large et en travers avant de poster.
Voila mon probleme : Je suis en train de faire un site avec des bordures images avec des div et tout cela marche trés bien.
Mais j'ai un probleme de compatibilité avec IE7.
Je voudrais que mes deux colonnes ait toujours la meme hauteur et donc que la colonne de gauche fasse la hauteur de la colonne de droite.
J'y arrive sans probleme avec un height : 100% sous firefox mais evidemment sous ie 7 ca ne marche pas, j'ai essayé un tas de hack mais rien n'y a fait pouvez vous m'aider s'il vous plait???

voici mon site http://www.guillaumette.com

pour l'instant j'ai fixé min-height a 460px mais croyez moi j'ai essayé un tas de choses avec min-height. Cliquez sur le lien artisanat pour voir le comportement de la colonne de gauche dans ie7 et firefox.

Ps: en passant félicitations a tout ceux qui participent a ce forum, c'est vraiment une bible.
oui j'ai effectivement vu ce tut, mais je ne trouve pas la réponse à mon problème.
Comme j'ai dit avant j'ai essayé avec min-height:100% et avec min-height:1px mais rien n'y fait, par contre quand je met min-height:460px la valeur est respecté...
Je vais m'arracher tout mes cheveux.
Si vous avez besoin du css/xhtml dites le moi je vous fait un copier coller.
Merci de votre aide
Salut,

De cette manière, ça risque d'être compliqué au niveau compatibilité entre navigateur.
Par contre en "trichant" un peu, on obtient un résultat plus stable, je te laisse ce bout de code comme piste possible.

<style type="text/css">
*{margin: 0; padding: 0;}

body{
background: #d6d6d6;
}

#conteneur{
background: lime url(ton_image.jpg);
background-position: bottom left;
background-repeat: no-repeat;
width: 900px;
margin: 10px auto;
overflow: hidden;
}

#gauche{
width: 300px;
float: left;
}

#droite{/* conteneur suplémentaire pour retouver la couleur de fond de body dans la séparation verticale entre les 2 blocs*/
background: #d6d6d6;
width: 600px;
overflow: hidden;
float: right;/* pour ie6 éliminer 3px jog bug */
}

#contenu{
background: silver;
width: 590px;
margin-left: 10px;
}

	</style>
</head>	
<body>
	<div id="conteneur">
		<div id="gauche">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat sodales nunc. Nulla in purus. Integer eu risus. Donec commodo mi vitae lectus. Nullam laoreet accumsan erat. Proin in turpis vel dolor auctor malesuada. Quisque eu enim. Sed id mauris. Aliquam nec nisl et ligula facilisis facilisis. 
		</p>
		</div>
		<div id="droite">
			<div id="contenu">	
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat sodales nunc. Nulla in purus. Integer eu risus. Donec commodo mi vitae lectus. Nullam laoreet accumsan erat. Proin in turpis vel dolor auctor malesuada. Quisque eu enim. Sed id mauris. Aliquam nec nisl et ligula facilisis facilisis. Vestibulum suscipit, erat non mattis iaculis, dui nisi adipiscing velit, non imperdiet lorem eros at est. Vivamus pellentesque, turpis id pellentesque vehicula, sem tellus dictum nisi, ac consequat lacus leo in ipsum. Donec est enim, ullamcorper et, fringilla eu, convallis at, diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque consequat congue risus. Nullam pellentesque quam ac leo molestie condimentum. Quisque dignissim, augue eget hendrerit accumsan, quam urna adipiscing eros, ut commodo dolor nulla id mauris.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat sodales nunc. Nulla in purus. Integer eu risus. Donec commodo mi vitae lectus. Nullam laoreet accumsan erat. Proin in turpis vel dolor auctor malesuada. Quisque eu enim. Sed id mauris. Aliquam nec nisl et ligula facilisis facilisis. Vestibulum suscipit, erat non mattis iaculis, dui nisi adipiscing velit, non imperdiet lorem eros at est. Vivamus pellentesque, turpis id pellentesque vehicula, sem tellus dictum nisi, ac consequat lacus leo in ipsum. Donec est enim, ullamcorper et, fringilla eu, convallis at, diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque consequat congue risus. Nullam pellentesque quam ac leo molestie condimentum. Quisque dignissim, augue eget hendrerit accumsan, quam urna adipiscing eros, ut commodo dolor nulla id mauris.
			</p>
			</div>
		</div>
	</div>
Sujet clos
Aller à