Div qui remplit le reste de la place

**patrickvier** · 04/04/2017, 19h02

Bonjour,
Depuis qlq jours je bute sur le problème suivant :
j'ai une Div à gauche (type menu) et une div (content) collée à cette dernière avec un float:left.
La div "content" devrai simplement remplir tout le reste de la place dispo avec une limite à 200px, par exemple.
j'ai essayé dans tous les sens avec min/max/width, mais rien n'y fait

Ci-dessous le code html :

Code html :

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="App_Themes/Theme1/MisePage.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">
        Header
        </div>
        <div id="RegieSelect">
            Selection des regies
        </div>
        <div id="Container">
            <div id="Menu">
                MASTER Mes menus à gauche
            </div>
            <div id="Content">
                Master du contenu
            </div>
        </div>
        <div id="footer">
            Le footer
        </div>
    </form>
</body>
</html>

Ici le code CSS :

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
body {
    font-family:'Segoe UI',Verdana,Arial;
    background-color:#546f7a;
    background-color:#222;
}
#header{
    background-color: #d5e8ef;
}
#RegieSelect{
    background-color:darksalmon;
}
#Container {
    max-width:100%;
    background-color:beige;
}
#Menu {
    background-color:aquamarine;
    float:left;
    min-width:200px;
}
#Content {
    background-color:chocolate;
    float:left;
    width:70%;
}
#footer {
    background-color:darkorange;
    clear:left;
}

la div "content" devrai remplir jusqu'au bout et en réduisant la fenêtre, la div passe sous le menu lorsqu'elle atteint la dimension de 200px (sa limite).
Merci de votre aide
Patrick

**Dokho1000** · 05/04/2017, 08h08

Ce n'est pas le bon forum pour ca mais plutot celui ci...

je peux déjà te dire que tu mélange un peu tout.

min-width est utilisé pour indiquer la taille min d'un width, si tu ne précise rien d'autre il prendra toute la place dont il dispose
max-width est utilisé pour indiquer la taille max d'un width, si tu ne précise rien d'autre il prendra toute la place dont il dispose jusqu’à la taille max précisé
Ne pas mélanger des % et des tailles fixes (px)

Div qui remplit le reste de la place

CSS

Vue hybride

Discussions similaires

Partager

Partager