Responsive

HTML

<br>
<br>
<br>


<div id="Page">
<div id="SousPage">


<!-- Bloc Actu -->
<div id="GrilleY0X0" class="GrilleY0X0Niveau1">
    <div id="SousGrilleY0X0-Titre" class="GrilleY0X0Niveau1">Les actus SI+</div>
    <!-- Actu 1 -->
    <div id="SousGrilleY0X0-1" class="GrilleY0X0Niveau1">08 avril 2016<br/><a style="text-decoration: none;" href="actus/Pages/SI+_Portail%20L-CRI-Manager.aspx">SI+ La capitalisation de nos faiblesses est désormais outillée grâce au portail L-CRI Manager</a></div>
    <!-- Actu 2 -->
    <div id="SousGrilleY0X0-2" class="GrilleY0X0Niveau1">05 avril 2016<br/><a style="text-decoration: none;" href="actus/Pages/Catalogue-des-offres-de-services-standards-du-SI.aspx##">SI+ Catalogue des offres de services standards du SI : Retrouvez les dernières informations ! </a></div>
    <!-- Actu 3 -->
    <div id="SousGrilleY0X0-3" class="GrilleY0X0Niveau1">20 janvier 2016<br/><a style="text-decoration: none;" href="actus/Pages/autocontr%c3%b4les-et-Socrate-pour-le-TOP-SOX.aspx">SI+ Symbioz : Quid des autocontrôles et de Socrate pour le TOP SOX ? </a></div>
    <!-- Actu 4 -->
    <div id="SousGrilleY0X0-4" class="GrilleY0X0Niveau1">14 janvier 2016<br/><a style="text-decoration: none;" href="actus/Pages/Le-e-learning-BOOLO-est-disponible.aspx">SI+ Symbioz : Le e-learning BOOLO est disponible !</a></div>
    <!-- Actu 5 -->
    <div id="SousGrilleY0X0-5" class="GrilleY0X0Niveau1">17 décembre 2015<br/><a style="text-decoration: none;" href="actus/Pages/Newsletters-Symbioz.aspx">SI+ Symbioz : Retrouvez les Newsletters !</a></div>
    <!-- Actu 6 -->
    <div id="SousGrilleY0X0-6" class="GrilleY0X0Niveau1">07 décembre 2015<br/><a style="text-decoration: none;" href="actus/Pages/bienvenue-a-Roads.aspx">SI+ Le Plan Global évolue : Bienvenue à Roads</a></div>
    <!-- Actu 7 -->
    <div id="SousGrilleY0X0-7" class="GrilleY0X0Niveau1">30 novembre 2015<br/><a style="text-decoration: none;" href="actus/Pages/Symbioz_relais-locaux.aspx">SI+ Symbioz : Des relais locaux...

CSS

#Page
{ float: left;
  left: 50%;
  position: relative;
  /*position: relative;
  min-height: 250px;
  text-align: center;	
  display: block;*/}
  
#SousPage
{ position: relative;
  right: 50%;
  overflow: hidden;/* pour englober les enfants flottant*/
  /*top: 0px;
  left: 0px;
  vertical-align:middle;
  display:inline-block;
  min-width: 200px;
  max-width: 1000px;
  width: 100%;
  height: 100%;
  border: 1px solid grey;
  z-index: 30;
  text-align: center;*/}

/*****************/
/*****************/
/**** Grilles ****/
/*****************/
/*****************/
#GrilleY0X0
{ top: 0px;
  left: 0px;
  float: left;
  min-width: 200px;
  max-width: 300px;
  width: 33%;
  height: 33%;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #ffffff;
  border: 1px solid grey;
  z-index: 30;
  text-align: left;
  color: #ffffff;
  font-size: 12px;
  display: block;}
#SousGrilleY0X0-Titre
{ margin-bottom: -8px;
  width: auto;
  height: auto;
  padding: 0px;
  text-align: center;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  background-color: #ffffff;
  border: 0px none -moz-use-text-color;
  color: #ff6600;
  font-size: 18px;}
#SousGrilleY0X0-1
{ margin-bottom: -3px;
  width: auto;
  height: auto;
  padding: 0px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  background-color: #eeeeee;
  border: 0px none -moz-use-text-color;
  color: #ff6600;}
#SousGrilleY0X0-2
{ margin-bottom: -3px;
  width: auto;
  height: auto;
  padding: 0px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  background-color: #ffffff;
  border: 0px none -moz-use-text-color;
  color: #ff6600;}
#SousGrilleY0X0-3
{ margin-bottom: -3px;
  width: auto;
  height: auto;
  padding: 0px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  background-color: #eeeeee;
  border: 0px none -moz-use-text-color;
  color:...