Overlapping footer

8BaLL · 9 Jan 2015 at 23:20

I am having issues with my <footer> it is showing as overlapping my <section> tag on brackets can anyone see a problem here I can not, any help would be great thankyou.

<!DOCTYPE html>


<html>
<head>
<title>A Modern World</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div id="wrapper">
<header id="banner">
<img src="banner3.png" alt="Modern World" width="960" height="150">
</header>
<nav id="navigation">
<ul>
<li class="navigation"><a href="#">Home</a></li>
<li class="navigation"><a href="#">History</a></li>
<li class="navigation"><a href="#">About</a></li>
<li class="navigation"><a href="#">Products</a></li>
<li class="navigation"><a href="#">Jobs</a></li>
<li class="navigatiom"><a href="#">Contact</a></li>
</ul>
</nav>
<section id="main">
<h3>Welcome to a Modern World</h3>
<p>This site was created for all your mod needs weither you want to keep on top of the mod culture music, fashion and scooters or you are a new comer and want to just find out.</p>
<br>
<hr>
<article>
<h3>Paul Weller announces UK tour for 2015</h3>
<div class="image">
<img src="weller.jpg" alt="myimage" width="150" height="150">
</div>
<p>Mod music icon Paul Weller has announced he will be touring Uk in spring 2015 his words were "I will be only be performing in towns and cities often missed", His 14 date show will kick off on 5 March at the Plymouth Pavillions before heading to Swindon, Watford, Stoke-On-Trent, Halifax and more - no London date has been announced Kepp an eye out on this page for more information.</p>
</article>
<hr>
<article>
<h3>Rock legend Joe Cocker dies from lung cancer </h3>
<div class="image">
<img src="cocker.jpg" alt="myimage" width="150" height="150">
</div>
<p>We must say a sad goodbye to the british vocalist Joe cocker who died on December 22nd age of 70 and had been battling with lung cancer, He was not just an amazing performer but also one of the most distinctive and inspiring rock artists of the 60s and 70s show your appreciation and visit his site by clicking his picture.</p>
</article>
<hr>
<article>
<h3>The Who Hits 50 UK tour at the 02 Arena Postponed</h3>
<div class="image">
<img src="who.jpg" alt="myimage" width="150" height="150">
</div>
<p>The Who have postponed the final shows of there Who Hits 50 Uk tour at the 02 Arena in London due to Roger Daltrey becoming ill with a throat infection and had been ordered to give it a rest, but worry not the changes of dates have been confirmed and are as follows:</p>
<p>17th December will move to 22nd March 2015.</p>
<p>18th December will move to 23rd March 2015.</p>
<p>The band and their management wish to sincerely apologise to all ticket holders for the inconvenience and disappointment this has caused.</p>
</article>
</section>
<footer>
<small>© 2015 Gareth Bailey All Rights Reserved</small>
</footer>
</div>
</body>
</html>

8BaLL · 9 Jan 2015 at 23:23

In fact the final <article> is not showing as it is even in the <section> when it clearly is and it all passes validation with no problems.

8BaLL · 10 Jan 2015 at 00:19

On the actual site it only shows in brackets I think it may be a bug in brackets this is my first attempt in coding clearly it would show different otherwise but I will post my css to make sure.

body {
background-image: url(vespablue.jpg);
}

#wrapper {
width: 960px;
margin: 1% auto;
padding-bottom: 1em;
height: auto;
background-color: white;
border: 2px solid black;
box-shadow: 0px 0px 15px 1px black;
}

/*start of navigation*/
#navigation {
border-bottom: 1px solid #333;
width: 960px;
}

#navigation ul {
margin: 0;
padding: 0;
overflow:hidden;
}

#navigation ul li {
float: left;
border-right: 1px solid #333;
list-style-type: none;
}

#navigation ul li a {
display: block;
padding: 0.4em 1.5em;
font-family: Verdana, Arial, sans-serif;
}

#navigation a:link {
color: #333;
text-decoration: none;
}

#navigation a:visited {
color: #006600;
text-decoration: none;
}

#navigation a:hover {
color: #ff0000;
text-decoration: none;
}
/*end of navigation*/

#main {
width: 960px;
height: auto;
}

#main h3 {
margin: 1em 1em 1em 1em;
}

h3 {
font-family: Verdana, Arial, sans-serif;
}

p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 1.3em;
}

hr {
width: 850px;
background: #333;
}

article {
float: left;
width: auto;
height: auto;
margin: 0em 1em 1em 1em;
padding: 0em 0em 0em 0em;
}

article h3 {
margin: 1em 1em 1em 0em;
}

div.image {
float: left;
margin: 0 0.5em 1em 1em;
}

article p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 0;
}

img {
display: block;
padding: 0;
margin: 0;
border: 0;
}

/*start of link style*/
a:link {
color: #0000ff;
text-decoration: none;
}

a:visited {
color: #006600;
text-decoration: none;
}

a:hover {
color: #ff0000;
text-decoration: underline;
}
/*end of link style*/

footer {
margin: 0px;
text-align: center;
font-family: Verdana, Arial, sans-serif;
}

8BaLL · 10 Jan 2015 at 00:53

Smeaney and Kaku thankyou very much for your quick help, Kaku that fix worked perfect you are a leg-end!

8BaLL · 11 Jan 2015 at 00:13

ugh I seem to be having another major problem now similar but my section is overlapping my wrapper.

HTML5

<!DOCTYPE html>







<html>
<head>
<title>A Modern World</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>

<body>
<div id="wrapper">
<header id="banner">
<img src="banner3.png" alt="Modern World" width="960" height="150">
</header>
<nav id="navigation">
<ul>
<li class="navigation"><a href="index.html">Home</a></li>
<li class="navigation"><a href="#">History</a></li>
<li class="navigation"><a href="#">About</a></li>
<li class="navigation"><a href="products.html">Products</a></li>
<li class="navigation"><a href="jobs.html">Jobs</a></li>
<li class="navigatiom"><a href="#">Contact</a></li>
</ul>
</nav>
<section id="mainleft">

<h3>Parka Coats</h3>
<img src="who.jpg" alt="The Who Parka Coat" width="150" height="150">
<img src="who.jpg" alt="The Who Parka Coat" width="150" height="150">
<h3>Jackets</h3>
<img src="who.jpg" alt="The Who Parka Coat" width="150" height="150">
<h3>Suits</h3>
<img src="who.jpg" alt="The Who Parka Coat" width="150" height="150">
<img src="who.jpg" alt="The Who Parka Coat" width="150" height="150">
<h3>Shirts</h3>
<img src="who.jpg" alt="The Who Parka Coat" width="150" height="150">
<img src="who.jpg" alt="The Who Parka Coat" width="150" height="150">
</section>
<div id="rightcol">
<aside>
<h3>Purchase information</h3>
<p>Looking on making a purchase no problem?
<br>
With each item there will be a seven digit reference code when calling quote the reference code and the quantity for your order to be proessed</p>
</aside>
</div>
<footer>
<small>© 2015 <a href="mailto:[email protected]">Gareth Bailey</a> All Rights Reserved</small>
</footer>
</div>
</body>
</html>

CSS

body {
background-image: url(vespablue.jpg);
}

#wrapper {
width: 960px;
margin: 1% auto;
height: auto;
background-color: white;
border: 2px solid black;
box-shadow: 0px 0px 15px 1px black;
}

/*start of navigation*/
#navigation {
border-bottom: 1px solid #333;
width: 960px;
}

#navigation ul {
margin: 0;
padding: 0;
overflow:hidden;
}

#navigation ul li {
float: left;
border-right: 1px solid #333;
list-style-type: none;
font-family: Verdana, Arial, sans-serif;
}

#navigation ul li a {
display: block;
padding: 0.4em 1.5em;
font-family: Verdana, Arial, sans-serif;
}

#navigation a:link {
color: #333;
text-decoration: none;
}

#navigation a:visited {
color: #006600;
text-decoration: none;
}

#navigation a:hover {
color: #ff0000;
text-decoration: none;
}
/*end of navigation*/

/*Start of breadcrumbs*/
#breadcrumbs {
display: inline;
margin: 10px 0px 0px 10px;
}

/*End of breadcrumbs*/

#main {
width: 960px;
height: auto;
float:left;
}

#mainleft {
width: 700px;
float:left;
}

#mainleft h2 {
margin: 1em 1em 0.2em 0.8em;
font-family: Verdana, Arial, sans-serif;
}

#rightcol {
float: left;
width: 215px;
padding: 0 20px 0 20px;
}

#rightcol h3 {
font-family: Verdana, Arial, sans-serif;
}

#main h2 {
margin: 1em 1em 0.2em 0.8em;
font-family: Verdana, Arial, sans-serif;
}

h3 {
font-family: Verdana, Arial, sans-serif;
margin: 1em 1em 0.2em 0.8em;
}

p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 1.3em;
}

hr {
width: 850px;
background: #333;
}

article {

width: auto;
height: auto;
margin: 0em 1em 2.5em 1em;
padding: 0em 0em 0em 0em;
}

article h3 {
margin: 1em 1em 1em 0.8em;
}

div.image {
float: left;
margin: 0 0.5em 1em 1em;
}

article p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 0;
}

img {
display: block;
padding: 0;
margin: 0;
border: 0;
}

/*start of link style*/
a:link {
color: #0000ff;
text-decoration: none;
}

a:visited {
color: #006600;
text-decoration: none;
}

a:hover {
color: #ff0000;
text-decoration: underline;
}
/*end of link style*/

footer {
margin-bottom: 0.2em;
text-align: center;
font-family: Verdana, Arial, sans-serif;
}

8BaLL · 11 Jan 2015 at 12:36

Thanks spengos that worked I'm almost there now I'm just trying to figure out one more ting now it is actually the last thing my teacher at uni is useless he never reply's and I wont see him till it is too late and it seems that people here are much more helpful and knowledgeable on my products page my images are starting to stagger wit the page once again I am missing something

HTML

<!DOCTYPE html>







<html>
<head>
<title>A Modern World</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>

<body>
<div id="wrapper">
<header id="banner">
<img src="banner.png" alt="Modern World" width="960" height="150">
</header>
<nav id="navigation">
<ul>
<li class="navigation"><a href="index.html">Home</a></li>
<li class="navigation"><a href="#">History</a></li>
<li class="navigation"><a href="#">About</a></li>
<li class="navigation"><a href="products.html">Products</a></li>
<li class="navigation"><a href="jobs.html">Jobs</a></li>
<li class="navigatiom"><a href="#">Contact</a></li>
</ul>
</nav>
<div id="mainleft">
<h3>Parka Coats</h3>
<article>
<div class="productsimage">
<img src="m51parka.jpg" alt="M-51 Parka Coat" width="150" height="200">
</div>
<h4>M-1951 Fishtail Parka</h4>
<p>Authentic U.S. Military Issue M-1951 Fishtail Parka's were the original parka coats worn by Mods in the 1960s. The mohair frieze / nylon liner is much heavier than its successor, the M-1965 fishtail parka and produced using finer materials. M-1951's are becoming increasingly rare and hard to find. We only sell M-1951's which pass our inspection tests.</p>
<br>
<p>REF 761/1367</p>
</article>
<article>
<div class="productsimage">
<img src="m65parka.jpg" alt="M-65 Parka Coat" width="150" height="204">
</div>
<h4>M-1965 Fishtail Parka</h4>
<p>The M-1965 is an excellent alternative to the M-1951 fishtail parka, its both warmer and lighter than the M-1951 and will last you for years and at a much lower price.</p>
<br>
<p>REF 761/1368</p>
</article>
<h3>Jackets</h3>
<article>
<div class="productsimage">
<img src="harrington.jpg" alt="Harrington Jacket" width="150" height="204">
</div>
<h4>Harrington Jacket</h4>
<P>Carefully crafted in the original style our Harringtons are 100% quality, available in all sizes and currently only available in Navy Blue but with more colours to come very soon.</P>
<br>
<p>REF 762/2743</p>
</article>
<h3>Suits</h3>
<article>
<div class="productsimage">
<img src="charcoalsuit.jpg" alt="Charcoal Check Suit" width="150" height="225">
</div>
<h4>Check Mod Slim-Fit Suit - Charcoal</h4>
<p>A beautiful Italin mod suit available in charcoal check with a three button Jacket with double side vents and flat fronted trousers.</p>
<br>
<p>REF 765/2821</p>
</article>
<article>
<div class="productsimage">
<img src="graysuit.jpg" alt="Gray Check Suit" width="150" height="225">
</div>
<h4>Check Mod Slim-Fit Suit - Gray</h4>
<p>A beautiful Italin mod suit available in gray check with a three button Jacket with double side vents and flat fronted trousers.</p>
<br>
<p>REF 765/2822</p>
</article>
<h3>Shirts</h3>
<article>
<div class="productsimage">
<img src="shirtbr.jpg" alt="Check Shirt Blue/Red" width="150" height="177">
</div>
<h4>Mod Check Shirt - Blue/Red</h4>
<p>A classic mod short sleeve shirt with blue and red checks and all the bells and whistles to give that 60s mod style to your wardrobe</p>
<br>
<p>REF 767/3489</p>
</article>
<article>
<div class="productsimage">
<img src="shirtwb.jpg" alt="Check Shirt White/Blue" width="150" height="177">
</div>
<h4>Mod Check Shirt - White/Blue</h4>
<p>A classic mod short sleeve shirt with white and blue checks and all the bells and whistles to give that 60s mod style to your wardrobe</p>
<br>
<p>REF 767/3490</p>
</article>
</div>
<div id="rightcol">
<aside>
<h3>Purchase information</h3>
<p>Looking on making a purchase no problem?
<br>With each item there will be a seven digit reference code when calling quote the reference code and the quantity for your order to be proessed.</p>
</aside>
</div>
<footer>
<small>© 2015 <a href="mailto:[email protected]">Gareth Bailey</a> All Rights Reserved</small>
</footer>
</div>
</body>
</html>

CSS

body {
background-image: url(vespablue.jpg);
}

#wrapper {
overflow: hidden;
width: 960px;
margin: 1% auto;
height: auto;
background-color: white;
border: 2px solid black;
box-shadow: 0px 0px 15px 1px black;
}

/*start of navigation*/
#navigation {
border-bottom: 1px solid #333;
width: 960px;
}

#navigation ul {
margin: 0;
padding: 0;
overflow:hidden;
}

#navigation ul li {
float: left;
border-right: 1px solid #333;
list-style-type: none;
font-family: Verdana, Arial, sans-serif;
}

#navigation ul li a {
display: block;
padding: 0.4em 1.5em;
font-family: Verdana, Arial, sans-serif;
}

#navigation a:link {
color: #333;
text-decoration: none;
}

#navigation a:visited {
color: #006600;
text-decoration: none;
}

#navigation a:hover {
color: #ff0000;
text-decoration: none;
}
/*end of navigation*/

/*Start of breadcrumbs*/
#breadcrumbs {
display: inline;
margin: 10px 0px 0px 10px;
}

/*End of breadcrumbs*/

#main {
width: 960px;
height: auto;
float:left;
}

#mainleft {
width: 660px;
float:left;
padding: 0 20px 0 20px;
}

#mainleft h2 {
margin: 1em 1em 0.2em 0.8em;
font-family: Verdana, Arial, sans-serif;
}

#rightcol {
float: left;
width: 220px;
padding: 0 20px 0 20px;
}

#rightcol h3 {
font-family: Verdana, Arial, sans-serif;
text-align: center;
}

#mainleft h4 {
font-family: Verdana, Arial, sans-serif;
}

#main h2 {
margin: 1em 1em 0.2em 0.8em;
font-family: Verdana, Arial, sans-serif;
}

h3 {
font-family: Verdana, Arial, sans-serif;
margin: 1em 1em 0.2em 0.8em;
}

p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 1.3em;
}

hr {
width: 850px;
background: #333;
}

article {

width: auto;
height: auto;
margin: 0em 1em 2.5em 1em;
padding: 0em 0em 0em 0em;
}

article h3 {
margin: 1em 1em 1em 0.8em;
}

div.homeimage {
float: left;
margin: 0 0.5em 1em 1em;
}

div.productsimage {
float: left;
margin: 0 0.5em 1em 1em;
}

article p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 0;
}

img {
display: block;
padding: 0;
margin: 0;
border: 0;
}

/*start of link style*/
a:link {
color: #0000ff;
text-decoration: none;
}

a:visited {
color: #006600;
text-decoration: none;
}

a:hover {
color: #ff0000;
text-decoration: underline;
}
/*end of link style*/

footer {
clear: both;
margin-bottom: 0.2em;
text-align: center;
font-family: Verdana, Arial, sans-serif;
}

8BaLL · 11 Jan 2015 at 14:02

I think I should be adding clear: both; somewhere

Edit: I fixed it by using overflow: hidden; in my article
Thankyou everyone for your help.

8BaLL · 11 Jan 2015 at 23:38

yes it is all indented Just not when posted here thanks spenncerr.