Discussion :

[{F-I}]

Bonsoir à tous,

J'ai un souci avec CSS, pour illustrer mon problème, voici en premier temps un capture d'écran :



La partie vert en haut est une barre navigation, il n'y a aucun problème.

Ensuite, un petit cadre blanc, c'est "corps" qui devrait contenir la liste "Titre, titou et tatitit" en float left ET contenu "Lorem ipsum ......" en float right.

Ce que je veux y arriver, c'est que le corps (fond blanc) RESTE DEDANS de la liste et contenu (pour l'instant, ils sont en dehors).

Voici le code source :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="arr_view">
        	 <div class="aff_listing">
            	<div class="liste">
                	<p>Titre<br />
                    titou<br />
                    tatitit<br />
                    </p>
                </div>
            	<div class="contenu_list">
                	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta sem vitae augue congue tincidunt. Nulla vehicula feugiat sapien sit amet malesuada..</p>
                </div>
            </div>
        </div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
/* Construction d'arrière plan */
#arr_view {
	width: 100%;
	min-height: 200px;
	background-color: #EFE9D9;
	padding-top: 20px;
	padding-bottom: 10px;
	}
 
/* début du style pour corps listing */
.aff_listing {
	width: 1024px;
	height: 100%;
	margin: auto;
	border: solid #000 1px;
	margin-bottom: 10px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #F5F5F5;
}
 
.liste {
	float: left;
	width: 100px;
	}
 
.contenu_list {
	float: right;
	width: 800px;
	clear: both;
	}
/* fin du style pour corps listing */

Je vous remercie beaucoup par avance de vos aides pour résoudre mon petit souci qui commence à m'agacer . (j'ai essayé avec clear: both, etc... sans succès, peut-être ai-je mal codé ?)

Bon codage

[{F-I}]

Résolu grâce à un contact au msn.

Voici la solution qu'il m'a proposé :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
.aff_listing {
	background: #F5F5F5;
	width: 1024px;
	margin: auto;
	float:inherit
	border: solid #000 1px;
	margin-bottom: 10px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #F5F5F5;;
 
	;
}
 
.liste {
	display: inline-block;
	width: 100px;
	vertical-align: top;
	}
 
.contenu_list {
	display: inline-block;
	width: 800px;
	}

Voici le rendu obtenu :