Oui enfin moi je vois les choses plus simplement, il faut que les objets soient a leur place de façon simple , pas de javascript ni formules trop sophistiquées !
Pour être aux normes, être compatible avec les smartphones et autres... alors il te suffit de ne pas imbriquer les div, mais bien les choisir !
Prends cet exemple (un html contenant sa feuille de style, ) copies colles et testes, tu verra sa marche dans tout les cas, après cela adapte cette façon de faire dans tout tes sites !!
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Ta Page</title>
<style>
html, body{height:100%;}
body{background-color:#577bac;font-family:"Times New Roman", Times, serif;color:#feffff;font-size:22px;margin:0;padding:0;border:0;}
div.aucentre{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}
span.leTitre{font-size:48px;color:#aaaaaa;}
span.LeTexte{text-align:left !important;}
p.p_centre{text-align:center !important;}
p.p_gauche{text-align:justify !important;}
img.bande{width:90%;}
@media screen and (max-width:1024px){
div.aucentre{height:auto;width:auto;max-width:90%;margin:22px;text-align:center;}
span.leTitre{font-size:20px;color:#aaaaaa;}
}
@media (max-width:640px){body, element1, element2{width:auto;margin:0;padding:0;}
div.aucentre{height:auto;width:auto;max-width:90%;margin:22px;text-align:center;}
span.leTitre{font-family:"Times New Roman", Times, serif;font-size:20px;color:#aaaaaa;}
textarea, pre, samp{overflow-wrap:break-word;hyphens:auto;}
pre, samp{white-space:pre-wrap;}
element1, element2{float:none;width:auto;}
.hide_mobile{display:none !important;}
body:before{content:"Version mobile du site";display:block;color:#999999;text-align:center;font-style:italic;}
}
</style>
</head><body>
<div class="aucentre">
<span class="leTitre">Le monde est fou <br />et Hymne à la beauté du monde</span><br />
<span class="LeTexte"><p class="p_centre">
<br />
<img src="http://www.fox-infographie.com/logos/le_monde_est_fou_huguette_gaulin.jpg" class="bande" alt=""><br />
huguette gaulin<br /><br /><br />
le monde est fou de plamondon original de 'ne tuez pas la beaute du monde'
<br /><br />
</p>
<p class="p_gauche">
Le monde est fou<br />
( Luc Plamondon / Christian St-Roch )<br />
Interprètes: Renée Claude, Diane Dufresne<br /><br />
</p><p class="p_centre">
<img class="bande" src="http://www.fox-infographie.com/logos/le_monde_est_fou_luc_plamondon.jpg" alt=""><br />
Luc Plamondon
<br /><br />
</p>
</span></div>
</body></html>
