<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="unePub" class="pub pub_1-4 draggable"></div> <div class="container"> <div class="row chemin-fer"> <div class="col-md-3 page-item"> <div class="row "> <div class="col-md-12 page-header"> Page navbar </div> </div> <div class="row"> <div class="col-md-12 page-content"> <div class="page-overlay"> <div class="titre-article">Mon super article</div> </div> <div class="row grille"> <div class="col-md-12 grille-ligne l1"> <div class="row"> <div class="col-md-3 grille-colone c1"> </div> <div class="col-md-3 grille-colone c2"> </div> <div class="col-md-3 grille-colone c3"> </div> <div class="col-md-3 grille-colone c4"> </div> </div> </div> <div class="col-md-12 grille-ligne l1"> <div class="row"> <div class="col-md-3 grille-colone c1"> </div> <div class="col-md-3 grille-colone c2"> </div> <div class="col-md-3 grille-colone c3"> </div> <div class="col-md-3 grille-colone c4"> </div> </div> </div> <div class="col-md-12 grille-ligne l1"> <div class="row"> <div class="col-md-3 grille-colone c1"> </div> <div class="col-md-3 grille-colone c2"> </div> <div class="col-md-3 grille-colone c3"> </div> <div class="col-md-3 grille-colone c4"> </div> </div> </div> <div class="col-md-12 grille-ligne l1"> <div class="row"> <div class="col-md-3 grille-colone c1"> </div> <div class="col-md-3 grille-colone c2"> </div> <div class="col-md-3 grille-colone c3"> </div> <div class="col-md-3 grille-colone c4"> </div> </div> </div> <div class="col-md-12 grille-ligne l1"> <div class="row"> <div class="col-md-3 grille-colone c1"> </div> <div class="col-md-3 grille-colone c2"> </div> <div class="col-md-3 grille-colone c3"> </div> <div class="col-md-3 grille-colone c4"> </div> </div> </div> <div class="col-md-12 grille-ligne l1"> <div class="row"> <div class="col-md-3 grille-colone c1"> </div> <div class="col-md-3 grille-colone c2"> </div> <div class="col-md-3 grille-colone c3"> </div> <div class="col-md-3 grille-colone c4"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 page-footer"> Page footer </div> </div> </div> </div> </div>

.page-item{ height: 410px; border : 1px solid black; } .page-header{ height:25px; margin :0px; padding:2px; background-color: lightgrey; } .page-footer{ height:25px; margin :0px; padding:2px; background-color: lightgrey; } .page-content{ height:360px; } .grille{ visibility:visible; height:360px; } .grille:hover{ visibility:hidden; } .grille-ligne{ } .grille-colone{ border:1px solid red; height:60px; } .pub{ background-color:lightblue; padding:1px; margin:0px; border: 2px solid white; } .page-overlay{ position:absolute; z-index:99; height:360px; vertical-align:middle; } .titre-article{ margin-top:50%; text-align:center; } .pub_1-8{ height:60px; width:50%; float:left; } .pub_1-4{ height:240px; width:120px; float:left; }