Imbrication de divs [Résolu]

[Ariranha]

Bonjour,

Plutôt que de longs discours je vais vous illustrer le problème :

Je souhaite obtenir ceci :



mais j'ai ceci :



Pour se faire le html:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="realisation">
        	<div class="left">
            	<h2>Paperplanes</h2>
                <img src="images/clients-home/modele-image-home.gif" alt="" width="204" height="103" />
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non elit eu tortor pretium tristique sed sed augue. Nulla eu tortor tellus. Phasellus bibendum mattis metus a placerat. Aliquam erat volutpat. Mauris tincidunt sodales vulputate.</p>
                <a href="#" target="_blank"><b>voir le site</b></a>
            </div>
            <div class="right">
            	<p>Client :<br>Les &Eacute;ditions Didier</p>
                <p>R&eacute;alis&eacute; en :<br>2010</p>
                <p>Technologies :<br>Flash as 3, Papervision 3D, Xml</p>
                <p>R&ocirc;le :<br>Création graphique,Développement & Animation flash</p>
            </div>
        </div>

et le css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.realisation {
	width: 350px;
	float: left;
	border: 2px #FC0 solid;
}
 
.realisation left {
	width: 204px;	
	float: left;
}
 
.realisation a, a:visited {
	text-align: right;
	color: #F4F4F4;
}
.realisation a:hover, a:active, a:focus {
	text-decoration: none;
}
 
.left {
	border: 1px #FFF solid;	
}
 
.right {
	float: right;
	border: 1px #FFF solid;	
}
 
.right p {	
	width: 115px;
}

Quelqu'un aurait une piste ?

Merci

[bob633]

Ca doit être un problème de dimension avec tes width, pour le test, si tu remplaces width: 350px; par width: 450px; ?

Sinon tu devrais préciser position:relative; à chaque fois que tu utilises la position float, même si je crois que par défaut ça utilise ça, j'ai déjà eu des soucis avec ça ..

Sinon il y a une autre solution, peut-être moins propre, utiliser un tableau pour positionner ta page ? Enfin ça répond pas à ta question ca.

[Bisûnûrs]

Code :

.realisation left

Il manque un point.

Code :

.realisation .left

[12monkeys]

Bonjour

Dans ton CSS le float:left n'est pas pris en compte. Car là il manque un point :

Code :

.realisation left {

Ce devrait plutôt être

Code :

.realisation .left {

Sinon bob633 : utiliser la position relative avec le float ne sert à rien, c'est avec la position absolute que ça sert : http://css.developpez.com/faq/?page=...ement_absolute

Et utiliser des tableaux : très mauvaise idée, comme tu l'indiques toi même : pas très propre. Ce n'est pas fait pour ça les tableaux : http://xhtml.developpez.com/faq/?pag...u_mise_en_page

Edit : grillé

[Ariranha]

Envoyé par bob633

Ca doit être un problème de dimension avec tes width, pour le test, si tu remplaces width: 350px; par width: 450px; ?

Je viens de tester et ça ne fait que décaler .right sur la droite de 100px;

Envoyé par bob633

Sinon il y a une autre solution, peut-être moins propre, utiliser un tableau pour positionner ta page ? Enfin ça répond pas à ta question ca.

Je voulais justement éviter de montrer en tableau...

Envoyé par 12monkeys

Dans ton CSS le float:left n'est pas pris en compte. Car là il manque un point :

Code :

.realisation left {

Ce devrait plutôt être

Code :

.realisation .left {

Merci.