28172 sujets

CSS et mise en forme, CSS3

Bonsoir tout le monde !

Je voudrais que mon div de droite ai la même hauteur que celui de droite (contenu variable) et que le div du bas colle bien au deux div du dessus. J'espère que j'ai été clair Smiley ohwell ...

Voici une image qui permet de mieux se représenter mon problème :

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
	<head> 
		<title>Jénzine Magazine</title>
		<style type="text/css"> 
			<!--
			#div1 {
				height: 50%;
			}
			#div2 {
				background-color: red;
				width: 400px;
				float: left;
			}
			#div3 {
				float: left;
				width: 400px;
				height: 100%;
				background-color: green;
			}
			#div4 {
				clear: both;
				background-color: blue;
			}
			-->
		</style> 
	</head> 
 
	<body>
		<div id="div1">
			<div id="div2">
				<p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.</p>

				<p>Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.</p>

				<p>Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum, cursim ad Caesarem perferentes, cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum, nec diluere obiecta permissi nec defensi periere conplures.</p>
				
				<p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.</p>

				<p>Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.</p>

				<p>Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum, cursim ad Caesarem perferentes, cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum, nec diluere obiecta permissi nec defensi periere conplures.</p>
				
				
			</div>
			
			<div id="div3">
				<p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.</p>
			</div>
			<div id="div4">
				<p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.</p>
			</div>
		</div>
	</body> 
</html> 


Merci d'avance à celui qui prendra le temps de me répondre !

Bye ! upload/35497-Sans-titre.jpg
Modifié par jonnefoy (11 Jan 2011 - 00:55)
Administrateur
Bonjour et bienvenue chez nous Smiley smile

Il y a plusieurs méthodes pour parvenir à tes fins :

1- la plus simple : deux cellules de tableau HTML
2- la moins compatible : modifier tes blocs avec un display: table-cell (reconnu à partir d'IE8)
3- la plus alambiquée : utiliser la technique dite "faux-columns" (colonnes factices), que l'on emploie dans certains de nos gabarits

Bonne chance.
Bonjour Raphael et merci de ton aide !

J'ai finalement choisi la technique des colonnes factices car elle correspondait plus à ce que je voulais faire (et été assez simple à mettre en place en somme).

Bonne fin de journée à tous !
Salut,
Raphael a écrit :
Il y a plusieurs méthodes pour parvenir à tes fins :

1- la plus simple : deux cellules de tableau HTML
2- la moins compatible : modifier tes blocs avec un display: table-cell (reconnu à partir d'IE8)
3- la plus alambiquée : utiliser la technique dite "faux-columns" (colonnes factices), que l'on emploie dans certains de nos gabarits

Il y en a une quatrième : mettre les deux blocs en positionnement flottant tout en leur attribuant un espacement inférieur de grande épaisseur (padding-bottom: 2000px, par exemple) et une marge inférieure négative de même valeur absolue (margin-bottom: -2000px), le bloc conteneur recevant un contexte de formatage (overflow: hidden, doublé pour IE 6 d'un haslayout comme height: 1%).