Je pense que la solution est proche mais je préfère avoir d'autre paire d'yeux qui regarde pour m'aidé a trouver plus vite
Voici mon problème :
voici mon code HTML
<!--home page-->
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YA creative web design</title>
<!-- CSS LINK -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- font -->
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- script JS -->
</head>
<body>
<div id="structure">
<header class="header"><!-- Début de mon header qui contiendra mon logo + ma navigation -->
<a href="index.php" class="logo">
<img src="img/logo3.png" alt="logo"/>
</a>
<nav>
<a href="index.php" class="active">Home</a>
<a href="portfolio.php" class="">Portfolio</a>
<a href="blog.php" class="">Blog</a>
<a href="skills.php" class="">Skills</a>
<a href="culture.php" class="">Culture</a>
<a href="contact.php" class="">Contact</a>
</nav>
</header>
<div class="stripes"></div><!--stripes (rayure) de séparation-->
<section class="entitle">
<h2>Blog <span>Mes articles, recommandations & tutoriels </span></h2>
<!-- ici l'affichage de mes 4 dernières réalisation + leurs liens respectif vers le portfolio -->
</section>
<div class="stripes"></div><!--stripes (rayure) de séparation-->
<section class="main-wrap"><!-- Présentation des différents article -->
<div class="articles">
<h2>Titre de l'article - <span>Date de création</span></h2>
<img src="http://wallnen.com/wp-content/uploads/2013/06/Red-Panda-10-HD-Wallpaper.jpg" alt="" class="articles-img">
<p class="description-articles">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in mi id turpis facilisis tristique. Quisque sed lobortis est. Phasellus aliquet sed elit vel porttitor.
</p>
<a href="#">Lire la suite ?</a>
<p class="author"><span>4 commentaires - </span>Xander - <span>Catégorie : </span>Nature <span>Mots clés : </span>ipsum lorem latin</p>
</div>
<div class="articles">
<h2>Titre de l'article - <span>Date de création</span></h2>
<img src="http://wallnen.com/wp-content/uploads/2013/06/Red-Panda-10-HD-Wallpaper.jpg" alt="" class="articles-img">
<p class="description-articles">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in mi id turpis facilisis tristique. Quisque sed lobortis est. Phasellus aliquet sed elit vel porttitor.
</p>
<a href="#">Lire la suite ?</a>
<p class="author"><span>4 commentaires - </span>Xander - <span>Catégorie : </span>Nature <span>Mots clés : </span>ipsum lorem latin</p>
</div>
<div class="articles">
<h2>Titre de l'article - <span>Date de création</span></h2>
<img src="http://wallnen.com/wp-content/uploads/2013/06/Red-Panda-10-HD-Wallpaper.jpg" alt="" class="articles-img">
<p class="description-articles">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in mi id turpis facilisis tristique. Quisque sed lobortis est. Phasellus aliquet sed elit vel porttitor.
</p>
<a href="#">Lire la suite ?</a>
<p class="author"><span>4 commentaires - </span>Xander - <span>Catégorie : </span>Nature <span>Mots clés : </span>ipsum lorem latin</p>
</div>
</section>
<section class="sidebar-wrap"><!-- Sidebar latéral droite -Derniers messages - Catégorie & Archives -->
<div class="lastmessage">
<h4>Derniers Message</h4>
<ul>
<li><a href="#">Xander dans <span>Apprendre le Html5</span></a>
<li><a href="#">Jenny dans <span>Apprendre le Html5</span></a>
<li><a href="#">Peps dans <span>Apprendre le Html5</span></a>
<li><a href="#">Potatoes dans <span>Apprendre le Html5</span></a>
</li>
</ul>
</div>
<div class="categories">
<h4>Catégories</h4>
<ul>
<li><a href="#">Jeux Vidéos</a>
<li><a href="#">Musiques</a>
<li><a href="#">Programmations</a>
<li><a href="#">Socials Networks</a>
</li>
</ul>
</div>
<div class="archives">
<h4>Archives</h4>
<ul>
<li><a href="#">Janvier 2012</a>
<li><a href="#">Juin 2013</a>
<li><a href="#">Février 2014</a>
<li><a href="#">Octobre 2015</a>
</li>
</ul>
</div>
</section>
</div><!-- fin structure -->
<footer class="footer">
<div class="structure">
<div class="wrap">
<div class="about"><!-- petit bloc A propos pour me décrire -->
<h5>A propos de moi</h5>
<div class="traitfooter"></div>
<p>
A venir ...
</p>
</div>
<!-- derniers tweets -->
<div class="tweets">
<h5>Mes derniers Tweets</h5>
<div class="traitfooter"></div>
<p>A Venir ...</p>
</div>
<!-- réseaux sociaux -->
<div class="social">
<h5>Retrouvez moi sur les réseaux sociaux</h5>
<div class="traitfooter"></div>
<a href="#" title="Twitter"><img src="img/social/twitter.png" height="32" alt="" /></a>
<a href="#" title="Google plus"><img src="img/social/googleplus.png" height="32" alt="" /></a>
<a href="" title="Facebook"><img src="img/social/facebook.png" height="32" alt="" /></a>
<a href="#" title="Linkedin"><img src="img/social/linkedin.png" height="32" alt="" /></a>
</div>
</div><!-- Fin du Wrap -->
</div>
</footer>
<!-- footer --><!--
<div id="footer">Copyright / Created & Designed by Talal Al akkad (Designer - Graphic Designer) & Youssef Al-akkad (Webmaster)</div>
-->
<!--Script JS -->
</body>
</html>voici le code CSS
/* CSS */
/* Constante */
html, body {background: #FFF; font-family: Merriweather,Arial,Helvetica,sans-serif; cursor: url("../img/cursor.png"), pointer; }
#structure { width: 1600px; height: 1200px; background: #FFF; margin-left: auto; margin-right: auto; }
.cb { clear: both; }
/*Header*/
.header { width: 1000px; height: 150px; margin-left: 350px; }
.header nav { margin-left: 150px; margin-top: -80px; }
.header nav a { margin-left: 50px; list-style: none; font-size: 15px; color: #24221f; text-decoration: none; font-weight: 500; }
.header nav a.active{ color: #b2b2b2; }
/*Stripes (Rayure) de séparation*/
.stripes {width: 1000px; height:1px; margin-left: 350px; border-top: solid 1px #e1e5ea; background: #ebeef1;}
/*Slider: Mascotte + En-tête*/
section.slider { height: 267px; position: relative; margin-top: 25px; margin-bottom: 25px; }
section.slider img { position: absolute; width: 400px; margin-left: 350px; }
section.slider div { position: absolute; width: 540px; margin-left: 800px; }
section.slider h2 { font-size: 28px; line-height: 1em; text-align: center; color: #747474; font-weight: 400; }
section.slider p { font-size: 18px; text-align: justify; font-weight: 400; color: #747474; }
section.slider a {text-decoration: none; color: #e89c46; }
/*Section A propos + En cours de formation*/
section.about { width: 500px; height: 150px; float: left; margin-left: 350px; margin-right: 25px; display: inline; }
section.about h2 { font-size: 20px; color: #747474; font-weight: 400;}
section.about p { font-size: 15px; line-height: 1.5em; font-weight: 400; color: #747474; }
section.inprogress { width: 500px; height: 150px; display: inline; }
section.inprogress h2 { font-size: 20px; color: #747474; font-weight: 400; }
section.inprogress img { width: 100px; display: inline; margin-left: 25px; margin-bottom: 25px;}
section.inprogress p { float: left; display: inline; font-weight: 400; color: #747474;}
section.inprogress p span { color: #747474; font-style: italic; line-height: 1.5em; }
/*Mes dernières réalisations*/
section.works { height: auto; margin-left: 350px; }
section.works article { display: inline; float: left; }
section.works h2 { font-size: 20px; color: #747474; font-weight: 400; }
section.works article a img { width: 230px; height: 147px; margin-right: 25px; display: inline; margin-top: 15px;}
section.works article h3 { display: block; font-size: 16px; margin-bottom: 0px; color: #747474; width: 200px; font-weight: 400; }
section.works article span { display: block; font-style: italic; font-size: 14px; color: #747474; width: 200px; }
section.works article aside { display: none; }
/* filtre qui s'applique une foi la souris sur l'image */
section.works article .thumb img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
section.works article .thumb:hover img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; }
/*Footer - A propos mini - Twitter ou Article Blog - Réseaux Sociaux*/
.structure { width: 1600px; margin-left: auto; margin-right: auto; }
footer.footer { border-top: solid 5px #e1e5ea; background: #ebeef1; height: 250px; background-color: #61686d; margin-right: -8px; margin-left: -8px; margin-bottom: -8px;}
footer.footer .wrap { width: 1600px; margin-top: 10px; margin-left: 350px; }
footer.footer .wrap div { display: inline; float: left; margin-right: 25px; width: 320px; }
footer.footer h5 { margin-bottom: 10px; color: #FFF; font-weight: 400;}
footer.footer p { color: #FFF; font-size: 12px; }
footer.footer .wrap .social a { margin-left: 10px; margin-right: 25px; }
footer.footer aside { display: none; }
.traitfooter { border-top: solid 0.08em #c2c2c2; margin-bottom: 10px; }
/* entitled */
section.entitle { height: auto; margin-left: 350px; }
section.entitle h2 { font-size: 20px; color: #747474; font-weight: 400; }
section.entitle h2 span { font-size: 12px; font-weight: 400; font-style: italic; }
/* Blog */
/* Articles */
section.main-wrap { float: left; width: 700px; height: auto; margin-left: 350px;}
section.main-wrap .articles { width: 500px; }
section.main-wrap .articles h2 { color: #747474; font-weight: 400; font-size: 20px;}
section.main-wrap .articles-img { width: 500px; border: solid 2px #747474; border-radius: 3px; box-shadow: 1px 1px 12px #555; }
section.main-wrap .description-articles { font-size: 13px; color: #747474; text-align: justify; }
section.main-wrap .articles a { font-size: 18px; text-decoration: none; color: #e89c46; line-height: 0.5em;}
section.main-wrap .author { font-size: 12px; float: right; color: #24221f; }
section.main-wrap .author span { font-style: italic; color: #747474;}
/* Sidebar Droite */
/* Derniers message */
section.sidebar-wrap { float: right; width: 300px; height: auto; margin-right: 250px; }
section.sidebar-wrap h4 { color: #747474; font-weight: 600; }
section.sidebar-wrap ul { display: block; list-style: none;}
section.sidebar-wrap ul li { list-style-type: none; }
section.sidebar-wrap ul li:before { content: "- "; }
section.sidebar-wrap ul li a { text-decoration: none; color: #747474; font-size: 12px; }
section.sidebar-wrap ul li a span { color: #24221f; font-style: italic; }
/* Catégories */Quelqu'un aurais une suggestion pour m'aidé a résoudre se souci ? merci d'avance
tu as une adresse ou allez voir, car avec la consoles de chrome ou firefox on pourrait trouver plus facilement
Bonsoir, je viens tout juste de trouver la solution :
http://www.journaldunet.com/developpeur/tutoriel/css/061130-css-comprendre-float-clear.shtml
j'avais bien ma class cb 'clear both' mais j'avais oublier de l'appliquer sur le footer ;)
merci quand même flo3376
de rien, merci à toi d'avoir valider ton post et d'avoir remonter une astuce
@+