Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rajeev Pillay
3,862 PointsWhy is my footer content showing right in the middle of my section content?Please help!
The following is my code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="normalize.css"> <link rel="stylesheet" type="text/css" href="new.css"> <meta charset="utf-8"> <title> RPG Data-entry </title> </head>
<body>
<header>
<a href = "index.html" >
<h1 class="primary-heading"> RPG Datasource </h1>
<h2 class="sec-heading">Database Management Experts</h2>
</a>
<nav class="navigation">
<ul class="boxed">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Contact Us</a></li>
<li><a href="about.html">Sitemap</a></li>
</ul>
<img src="img/abc.jpg" alt="data_entry" class="image" >
</nav>
</header>
<section class="grid1">
<div class="box1 col1">
<a href="service1.html"><img src="img/abc.jpg" alt="data_entry" style="width:100%;" ></a>
<p>Since he took office in 2010, deficit reduction has been a central theme for finance minister George Osborne,
who Cameron views as a potential successor. Now Osborne has a chance to make his mark with the first budget by
a fully Conservative administration since November 1996.</p>
</div>
<div class="box2 col1">
<a href="service2.html"><img src="img/abc.jpg" alt="data_entry" style="width:100%;" ></a>
<p>Since he took office in 2010, deficit reduction has been a central theme for finance minister George Osborne,
who Cameron views as a potential successor. Now Osborne has a chance to make his mark with the first budget by
a fully Conservative administration since November 1996.</p>
</div>
<div class="box3 col2" >
<a href="service3.html"><img src="img/abc.jpg" alt="data_entry" style="width:100%;" ></a>
<p>Since he took office in 2010, deficit reduction has been a central theme for finance minister George Osborne,
who Cameron views as a potential successor. Now Osborne has a chance to make his mark with the first budget by
a fully Conservative administration since November 1996.</p>
</div>
<div class="box4 col2" >
<a href="service3.html"><img src="img/abc.jpg" alt="data_entry" style="width:100%;" ></a>
<p>Since he took office in 2010, deficit reduction has been a central theme for finance minister George Osborne,
who Cameron views as a potential successor. Now Osborne has a chance to make his mark with the first budget by
a fully Conservative administration since November 1996.</p>
</div>
</section>
<footer>
<p>copyright 2015</p>
</footer>
</body>
The paragraph "copyright 2015" shows between my 2 images.
4 Answers
Radu Ioan Stochita
3,558 PointsYou should add the property clear to your CSS and everything should work fine.
footer {
clear: both;
}
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 PointsA couple of other small unrelated things: the html and head tags are missing and you are closing the section and body tag without ever opening them.
Rajeev Pillay
3,862 Pointsthank you guys! clear:both did the trick!
Radu Ioan Stochita
3,558 PointsI am glad that it was helpful. You can find more about his property on MDN or by just clicking this link: https://www.google.ro/search?q=mdn+clear&oq=mdn+clear&aqs=chrome..69i57j0l5.1116j1j7&sourceid=chrome&es_sm=93&ie=UTF-8
Rajeev Pillay
3,862 Pointsthank you guys! clear:both did the trick!