Administrateur
Bonjour fl0645,

Il est difficile de se prononcer sur tes choix de positionnement sans :
- savoir ce que tu souhaites obtenir (une image peut-être ?)
- savoir quelles sont tes connaissances de base en CSS et concernant les positionnements (float, inline-block, flexbox, grid layout, etc.)
- savoir quelles sont les contraintes de ton projet (en terme de compatibilité notamment)

Je pourrais te conseiller la meilleure solution qui est bien entendu Grid Layout, mais elle ne répond pas forcément à tes besoins.
Modérateur
Et l'eau,

@Raphael : +1

@fl0645: Je viens de parcourir ton code :
Par défaut, tous les éléments html sont en position static. Ce n'est pas la peine de le déclarer.
position-top, position-right, position-bottom, position-left, ça n'existe pas. z-index devrait t'être utile pour ton position fixed.

Dans les tuto Alsacreations, il y a une série d'articles à propos du positionnement. Je t'invite à jeter un coup d'oeil au cas où.
Désolé mais je part et ne peut pas terminer ta solution Smiley decu
donc j'ais mis le style dedans car une partie doit être dans le <head>
Bref prends tout mets le dans un html tu verras ça t"aidera à aller plus loin.
Demain soir... je veux dire ce soir je repasserai

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/c614e6c0da.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>Blog</title>

<style>
* { box-sizing:border-box; }
.centreXblanc > article > figure img
  {
    max-width:80%;
  }
@media screen and (min-width:640px){
  .centreXblanc > article { display:flex; justify-content:center;  align-items:center;  }
  .centreXblanc > article > figure,
  .centreXblanc > article > div   { flex:1 1 45%;  width:45%;  }
  .centreXblanc > div {  display: block;   width: auto;  }
}
</style>

</head>
<body>
<style>
@charset "utf-8";
body{	background: lightgrey;	font-size: 16px;font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";	color: rgba(0,0,0,0.87);}
.entete{	background: white;	position: fixed;    text-align: center;	width: 100%;	z-index: 2;}
.entete a{	padding: 10px;	margin-top: 50px;	margin-left: 20px;	margin-right: 20px;	text-decoration: none;	color: grey;	font-size: 24px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetica, Arial, "sans-serif";}
.header{background: url("http://www.fox-infographie.com/logos/mailing_logo_fi.jpg") no-repeat center center / cover;}
div.aside{   width: 375px;	background: grey;position : fixed;top : 170px;right : 0;z-index : 20;overflow : hidden;visibility : visible !important ;}	
.sidebar-title{	font-size: 30px;	text-align: center;}
li{    list-style: none;    padding-left: 40px;}
</style>
  <header>
    <nav class="entete">
			<a href="#accueil">Accueil</a>
			<a id="articles" href="#articles">Articles</a>
			<a href="#apropos">A propos</a>
			<a href="#contact">Contact</a>
	    	<i class="fab fa-facebook"></i>
    	    <i class="fab fa-linkedin"></i>
	</nav>
        
  </header>
<div class="header">
</div>
<div class="monBlog">
<p>Mon Blog</p>
</div>
	
<section class="centreXblanc" >
  <article>
    <figure>
		<img src="http://www.fox-infographie.com/logos/fox01.jpg" alt="article">
	</figure>    
    <div>  
	
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme 
assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait 
que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en 
soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des 
passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
    </div>
</article>
  <article>
    <figure>
		<img src="http://www.fox-infographie.com/logos/fox01.jpg" alt="article">
    </figure>    
    <div>  	
<p class="text">"Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble 
des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est 
aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications 
de mise en page de texte, comme Aldus PageMaker."</p>
    </div>
	</article>

  <article>
    <figure>
       <img src="http://www.fox-infographie.com/logos/fox01.jpg" alt="article">
    </figure>    
  <div>  

<p class="text">"Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble
 des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, 
 mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans 
 les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son 
 inclusion dans des applications de mise en page de texte, comme Aldus PageMaker." </p>
  </div>
 </article>
</section>

	
<div class="aside">
  <h4 class="sidebar-title">Catégorie</h4>
	<ul>
	<li>High-Tech</li>
	<li>Concentré du Web</li>
	<li>A propos</li>
	<li>Astuces pour dévloppeurs</li>
	<li>Ressources</li>
	<li>Bonnes pratiques</li>
	</ul>
</div>
</body>
</html>