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
3 réponses
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
tu as une adresse ou allez voir, car avec la consoles de chrome ou firefox on pourrait trouver plus facilement