Bonjour a tous,

je suis entrain de développer un site et j'ai un soucis d’ordre graphique, (j'utilise bootstrap) mais je ne comprend pas pourquoi l'affichage réagit comme sa.

voila ce que j'ai comme problème



et voila ce que je souhaiterai avoir



voila le code de ma page

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
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
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
    <div id="menu_vertical">
        <?php echo include("menu.php");?>
    </div>
<div id="pages">
        <div class="container">
            <table class="table table-hover">
            <thead>
            <tr>
                <th>Nom</th>
                <th>v.1</th>
                <th>v.2</th>
                <th>v.3</th>
                <th>v.4</th>
                <th>v.5</th>
                <th>v.6</th>
                <th>v.7</th>
                <th>v.8</th>
                <th>v.9</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>patate</td>
                <td>11</td>
                <td>0</td>
                <td>21</td>
                <td>31</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td><span class="glyphicon glyphicon-edit"></span></td>
            </tr>
            <tr>
                <td>carrote</td>
                <td>12</td>
                <td>0</td>
                <td>22</td>
                <td>32</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td><span class="glyphicon glyphicon-edit"></span></td>
            </tr>
                    </tbody>
        </table>
        </div>
  </div>
    </body>
</html>

et voila mon 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
#menu_vertical
{
    float:left;
    min-width:175px;
    max-width:200px;
    height:100%;
    background-color:#2A2F38;
}
 
#pages
{
height:100%;
    flex:1 0 auto;
 }