Forum : Div qui se place sous d'autres divs

Bonjour,

Je rencontre un problème lors de la création de mon code pour mon template.

En gros, le code c'est mon template de base, rien de bien compliqué ! :)

<!DOCTYPE html>
<html>
<head>
    <title>Titre du site</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

    <div id="sidebar"></div><!--
 --><div id="header">
        <div class="menu" id="icon_menu"></div>
        <span>Salut !</span>
    </div><!--
 --><div id="container">
        <div class="col_6"></div><!--
     --><div class="col_4"></div><!--
     --><div class="col_2"></div>
    </div>
    <div id="footer">
        <div class="col_3"></div><!--
     --><div class="col_3"></div><!--
     --><div class="col_3"></div><!--
     --><div class="col_3"></div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="js/responsive.js"></script>
</body>
</html>

@import "grid.css"; 
@import "responsive.css";
@media all and (max-width: 800px){
    .mobile
    {
        visibility: visible;
    }

    #sidebar
    {
        display: none;
        transform: translateX(-450px); 
    }

    .col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11,
    .col_12
    {
        width: 100%;
        margin-top: 10px;
    }
}
/*====================================
        General params
====================================*/
*
{
    box-sizing: border-box;
    clear: both;
}

body
{
    margin: 0;
    padding: 0;
    background-color: rgba(189, 195, 199,0.5);
    font-family: Roboto;
}

.mobile
{
    visibility: hidden;
}

/*====================================
        Sidebar and header
====================================*/
#sidebar
{
    width: 250px;
    background-color: #2ecc71;
    height: 100vh;
    display: inline-block;
    margin-bottom: -4px;
}

#header #icon_menu
{
    display: block;
    position: relative;
    float: left;
    height: 50px;
    width: 50px;
    cursor: pointer;
    background-color: black;
}

#icon_menu:after
{
    content: '';
    position: absolute;
    top: 4px;
    left: 10px;
    display: block;
    width: 30px;
    height: 0;
    box-shadow: 0 15px 0 1px #FFF, 0 21px 0 1px #fff, 0 27px 0 1px #FFF;
}

#header
{
    width: calc(100% - 250px);
    vertical-align: top;
    height: 60px;
    background-color: #7ecc70;
    display: inline-block;
    padding: 5px;
    line-height: 50px;
}

/*====================================
        Container
====================================*/

#container
{
    display: inline-block;
    min-height: 500px;
    width: calc(98% - 250px);
    vertical-align: top;
    margin: 1% 1% 1% 1%;
    float: right;
}

/*====================================
        Footer
====================================*/
#footer
{ 
    padding: 20px 0 20px 0;
    background-color: #27ae60;
}

/*====================================
        Grid system
====================================*/
.row{
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 100px;
}

.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11,
.col_12
{
    min-height: 100px;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    background-color: white;
}

.col_1
{
    margin-left: 1%;
    margin-right: 1%;
    width: 6.33%;

}

.col_2
{
    margin-left: 1%;
    margin-right: 1%;
    width: 14.66%;
}
.col_3{
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
}
.col_4
{
    margin-left: 1%;
    margin-right: 1%;
    width: 31.33%;
}

.col_5
{
    margin-left: 1%;
    margin-right: 1%;
    width: 39.66%;
}

.col_6
{
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}

.col_7 {
    margin-left: 1%;
    margin-right: 1%;
    width: 56.33%;

}

.col_8
{
    margin-left: 1%;
    margin-right: 1%;
    width: 64.66%;

}

.col_9
{
    margin-left: 1%;
    margin-right: 1%;
    width: 73%;

}

.col_10
{
    margin-left: 1%;
    margin-right: 1%;
    width: 81.33%;

}

.col_11
{
    margin-left: 1%;
    margin-right: 1%;
    width: 89.66%;

}

.col_12
{
    margin-left: 1%;
    margin-right: 1%;
    width: 98%;

}

Ce que je voudrais, c'est que ma div #container se place à côté de ma sidebar (et en dessous de mon header, logiquement).

Le problème est que ça se place sous ma sidebar.
J'ai essayé le positionnement absolute, mais quand je réduisais la fenêtre, le container chevauchait le footer et d'autres erreurs dans le genre arrivaient.

Merci d'avance à ceux qui m'aideront ! ;)

Div qui se place sous d'autres divs

2 réponses