cadre flottant a droite dans contenu

**pop_up** · 31/01/2008, 11h18

Bonjour,

J'ai une page avec un contenu de taille variable avec un menu de taille fixe à droite et à gauche.

Je souhaite ajouter dans la partie contenu un cadre flottant a droite qui contiendra des infos rapides.

Le problème est que le flux de mon contenu passe par dessus mon cadre droit.
de plus, mon contenu ne flotte pas à gauche de ce cadre
voici le code:

Code :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>cadre flottant</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />		
    <style type="text/css">
 
    body {margin: 0px;padding: 0px; font-family:Verdana,Arial, Helvetica, sans-serif;}
    #principal{ max-width:1024px; min-width:800px; margin:auto; padding:0;}
    DIV#conteneur{margin:0; padding:0;}
    DIV#menu_gauche{ margin:0; padding:0; width:200px; float:left; clear:both; background-color:red;}
    DIV#menu_droite{margin:0 0 0 0px; padding:0; float:right; width:201px; background-color:yellow;}
    DIV#contenu{ padding:0 15px 0 10px; overflow:auto;}
    h1{ font-size:1.6em; color:#014F61; margin:0; padding:0; font-weight: bold; text-align: center;}
    h2{ font-size:1.2em; color:#014F61; font-weight: normal; padding:0 0 0 30px; margin:30px 0 0 0; border-bottom:1px solid #000000; }
    .cadre-droite { float:right; width:35%; margin-left:10px;}
    .cadre-droite h2{ font-size:1.2em; color:#014F61; font-weight: normal; border:none;}
    DIV#filAriane{ margin:0; padding:20px 0 0 0; font-size:0.6em; }
    DIV#filAriane SPAN.texte{ color:#014F61; font-weight:bold; margin:0; padding:0;}
    DIV.bloc-contenu{margin:0; padding:1px; clear:both; overflow:auto;}
 
 
    </style>
</head>
<body>
    <div id="principal">
		<div id="conteneur">
			<div id="menu_gauche">
			bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />
			</div>
            <div id="menu_droite">
            bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />
			</div>
			<div id="contenu">
 
				<a id="haut" name="haut"></a>
				<div id="filAriane">
					Vous &ecirc;tes ici : <span class="texte"><a href="">Accueil</a> &gt; <a href="">par la</a> &gt; la page</span>
                </div>
 
				<div id="page">
                    <h1>titre 1</h1>
 
                    <div class="cadre-droite" style="float:right; width:35%; margin-left:10px;">
                        <h2>info rapide</h2>
                        <div class="texte">
                            <ul>
                                <li><a href="">lien 1</a></li>
                                <li><a href="">lien 2</a></li>
                            </ul>
                        </div>
                    </div>
 
                    <h2>titre h2 contenu</h2>
                    <div class="bloc-contenu">
                        <div class="texte">
                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </div>
                    </div>
 
                    <h2>titre h2 contenu 2</h2>
                    <div class="bloc-contenu">
                        <div class="texte">
                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </div>
                    </div>
                </div>
			</div>
		</div>			
	</div>
</body>
</html>

merci pour votre aide

EDIT: pour le contenu qui ne flotte pas à gauche j'ai vu ma connerie à cause du bloc contenu. par contre pour le flux du h2 je vois toujours pas

**pop_up** · 31/01/2008, 11h42

résolu avec un overflow:auto; sur le h2.

Désolé pour le dérangement.

cadre flottant a droite dans contenu

CSS

Vue hybride

Discussions similaires

Partager

Partager