Bit of help with my syntax?

Question

Hey guys.

I am having trouble with my html and css. The two buttons that I have overlap the footer and I don't know why. My html is below and my css is below that.

<!-- Keep on improving this website! This is your beautiful portfolio, after all! When something new comes out, try it out here and try to make it work. When you learn something new that is interesting and you think will look nice here, try it out! Keep on improving! -->
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-49573636-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    <link href='http://fonts.googleapis.com/css?family=Allerta|Rosario' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>
        Dylan Dixon | Web Designer
    </title>
</head>
<body>
    <nav>
        <ul>
        <div id="name">
        <li><a href="http://dixondesign.me/">Dylan Dixon</a></li>
        </div>
        <div id="list">
            <li><a href="http://dixondesign.me/">Home</a></li>
            <li><a href="http://ibbyib.wordpress.com/">Blog</a></li>
            <li><a href="https://www.behance.net/dxndesign">My Portfolio</a></li>
            <li><a href="http://dixondesign.me/contact.html">Contact</a></li>
        </div>
        </ul>   
    </nav>
    <div id="innerwrapper">
        <div id="hgroup">
            <h1>Dylan Dixon </h1>
            <h2 class="header">web designer in training</h2>
        </div>
        <hr />
        <p>
            Pursuing my web design dream. I hope to one day learn all that there is to know about the ever-growing HTML5 and CSS scripts, and hopefully even Javascript.
        </p>

        <h2>About me</h2>
        <p>I enjoy playing video games, writing code, watching movies, t.v.shows, and Youtube videos. I would love to learn more about code than I already do, as my current knowledge is limited to basically html5 and css3. I am learning web design because it is one of the things that keeps my life interesting, high school can get a bit boring at times so this is really great for me. I live in Newfoundland, Canada, in a small town that you probably haven't heard of called Baie Verte. Not many stores or anything here but it's nice and peaceful. I'm in Level 1, or grade 10, of high school. I can't wait to graduate and study web design at a university!</p>

        <h2>My Design</h2>
        <p>So, as you may already be able to see by the style of my site, I specialize in  minimalist designs. Minimalist designs are sort of modern, abstract designs. If you've ever heard the saying "Less is more", well that is basically what minimalist design is. You can read more about it on <a href="http://en.wikipedia.org/wiki/Minimalism">this Wikipedia page.</a></p>

        <h2>What I would Like to Do</h2>
        <p>I would love to work for a company at some point in my life. Any company, just so long as I have fun and I am productive. I would also like to try working at home sometime. Could be a nice experience! Also, game design is a really interesting thing for me as well.</p>

        <h2>Currently Looking For Work</h2>
        <p>I am currently looking for work. I would like to do some cheap work, nothing over $30, to hone my skills and add things to my portfolio. Please contact me at one of the e-mails on the 'contact' page or at the e-mail below and I'll get back to you A.S.A.P.. Also, if you want to work on my framework alongside of me and others, <a href="https://github.com/ibbyib/framework">you can find the github here!</a></p>
        <h2>Additional Info</h2>
        <p>You can contact me at <a href="mailto:contact@dixondesign.me">contact@dixondesign.me</a>, and you are currently looking at my most used website right now. There are also some nice social links down below that I encourage you to look at! Thank you for checking out my beginner's website!</p>
        <h2>Social Links!</h2>
        <div id="buttons">
            <p><a href="https://twitter.com/ibbyibpr"><button id="tw" title="I tweet a lot!">Twitter</button></a><a href="https://www.behance.net/dxndesign"><button id="be" title="This is my portfolio where I put my work.">Behance</button></a><a href="http://www.reddit.com/user/JeffBanks/"><button id="rd" title="I post and comment quite a lot!">My Reddit</button></a></p>
        </div>
    </div>
        <div id="last">
            <p><a href="https://github.com/ibbyib/personalsite"><button class="primary">Change This Website!</button></a><br/>Yes, that's right. I'm offering up this website to anyone who wants to work on it or improve it in any way, shape, or form. Just go to the github, download the html and css, and change it around! Please let me know if you found something cool or something that I may want to see! Go ahead! I don't mind!</p>
        </div>
        <div id="right">
        <p><a href="https://github.com/ibbyib/framework"><button class="primary">Framework</button></a><br/>Come over and tell us what you think of our framework! Any criticism is welcome!</p>
        </div>

    <footer>
    &copy;2014 Dylan Dixon.
    </footer>
</body>
</html>

here is the css

/*Keep on improving this website! This is your beautiful portfolio, after all! When something new comes out, 
try it out here and try to make it work. When you learn something new that is interesting and you think will look nice here, 
try it out! Keep on improving! */
body{
    margin: 0px;
    padding: 0px;
    font-family:"duru sans";
    background-image: url("http://i.imgur.com/rXGJvlN.jpg")
}
#innerwrapper {
    max-width: 65%;
    margin:1em auto;
    margin-top:90px;
    margin-bottom:20px;
    background-color:#ffffff;
    box-shadow:1px 1px 4px 1px rgba(0,0,0,0.3);
    padding:1.75em 3em 1.75em 3em;
    border-radius:2px;
}
#e-mails p{
    padding-top:1em;
    padding-bottom:1em;
    max-width: 95%;
}
.primary{
    background-color:#3498db;
    border-radius:5px;
    padding:10px;
    border:2px solid #ffffff;
    font-size:20px;
    color:#ffffff;
}
.primary:hover{
    background-color:#2980b9;
    cursor:pointer;
}
#last{
    margin:1em auto;
    margin-bottom:10em;
    margin-top:3em;
    width:45%;
    padding-left:10px;
    padding-right:5px;
    float:left;
}
#right{
    margin:1em auto;
    margin-bottom:10em;
    margin-top:3em;
    width:45%;
    padding-left:5px;
    padding-right:10px;
    float:right;
}
img{
    float:left;
    margin-left:2em;
    margin-top:1em;
}
img:hover{
    box-shadow: 1px 1px 1px 1px;
}
nav ul li {
    display:inline-block;
    list-style-type: none;
    font-family:"open sans";
    font-size:18px;
    font-weight:bold;
    border:1px solid #ffffff;
    margin:0 1px;
    border-radius:2px;
}
nav ul li a {
    color:#ffffff;
    display:inline-block;
    line-height:30px;
    padding:8px 13px;
    text-decoration: none;
    font:15px "open sans", sans-serif;
    font-weight:bold;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition:all 0.4s;
    transition: all 0.4s;
}
nav ul li a:hover{
    background-color:#ffffff;
    color:#2980b9;
    text-decoration: none;
}
nav{
    background-color:#3498db;
    border:1px solid #16a085;
    box-shadow: 0px 2px 1px 0px;
    color:#2c3e50;
    display:block;
    overflow:hidden;
    width:100%;
    margin:0 auto;
    text-align: center;
    padding-top:5px;
    padding-bottom:5px;
    position:fixed;
    top:0;
    -webkit-transition:0.275s;
    -moz-transition:0.275s;
    -ms-transition:0.275s;
    -o-transition:0.275s;
    transition:0.275s;
}
nav:hover{
    padding-top:13px;
    padding-bottom:13px;
}
h1{
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    font-family:'Allerta', sans-serif;
    color:#34495e;
    font-weight:700;
    font-size:50px;
    margin-bottom: 15px;
    padding-top:15px;
    line-height:70px;
}
#list{
    float:right;
    margin-right:1em;
}
#name{
    float:left;
    text-transform: none;
    border:none;
    margin-left:1em;
}
#hgroup h1 {
    margin-bottom: 0;
}
p{
    font-size:17px;
    line-height: 1.425em;
    font-family:'Rosario', sans-serif;
}
header{
     -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
    text-align: center;
    display:block;
    background-color: #bdc3c7;
    height: 30px;
    font-family:"duru sans";
    font-weight:300;
    font-size:18px;
    padding-top: 15px;
}
header:hover{
    background-color:#7f8c8d;
}
h1:hover{
    color:#95a5a6;
}
a:hover{
    color:#2980b9;
    text-decoration: underline;
}
a{
    color:#3498db;
    text-decoration: none;
}

.header {
    font-weight: normal;
    color:#34495e;
    font-size: 30px;
    height:40px;
    padding: 0;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}
#tw{
    background-color:#4099FF;
    color:#ffffff;
    border:1px solid #4099FF;
    border-radius:5px;
    font-size:18px;
    font-family:'Allerta', sans-serif;
    padding:10px;
    margin-right:1em;
}
#tw:hover{
    background-color:#0084b4;
}
#be{
    font-size:18px;
    font-family:'Allerta', sans-serif;
    background-color:#1769ff;
    color:#ffffff;
    border:1px solid #1769ff;
    border-radius:5px;
    padding:10px;
    margin-right:1em;
}
#be:hover{
    background-color:#0084b4;
}
#rd{
    color:#ffffff;
    background-color:#FF4500;
    border:1px solid #FF4500;
    border-radius:5px;
    font-size:18px;
    font-family:'Allerta', sans-serif;
    padding:10px;
}
#rd:hover{
    color:#FF4500;
    background-color:#ffffff;
    border:1px solid #000000;
}
button:hover{
    cursor: pointer;
}
h2 {
    font-family:'Allerta', sans-serif;
    font-weight:600;
    font-size:32px;
    color:#34495e;
    padding-top: 40px;
    margin: 0px;
    padding-bottom:10px;
}

footer {
    text-align: center;
    margin: 0px;
    padding-top:10px;
    padding-bottom: 10px;
    font-weight:300;
    color:#ffffff;
    background-color:#3498db;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    overflow:none;
}

some of the elements that aren't in the html but are selected in the css are probably in the other file that I have, my contact page.

Sorry about the big long post!

Answer 1 · 2014-04-03T18:46:16Z

April 3, 2014 6:46pm

Dylan Dixon, you need to clear your footer element.

Answer 2 · 2014-04-03T18:42:55Z

April 3, 2014 6:42pm

Dylan, I copied your HTML and CSS (style.css) to a couple files on my desktop machine and everything seemed to display perfectly in IE and Chrome. It looks like you might want to check your reset.css and see if there is a rule causing the issue. Sorry if this is not specific enough, but I hope it gets you looking in the right direction.

Answer 3 · 2014-04-03T18:46:14Z

April 3, 2014 6:46pm

Looks good in Firefox/Mac as well. Nice design, by the way!

Answer 4 · 2014-04-03T18:54:51Z

April 3, 2014 6:54pm

Wonderful! That worked perfectly! Thank you ver much Andrew Shook!

Welcome to the Treehouse Community

Looking to learn something new?

Dylan Dixon

Dylan Dixon

Bit of help with my syntax?

4 Answers

Andrew Shook

Andrew Shook

Dylan Dixon

Dylan Dixon

Andrew Shook

Andrew Shook

Dylan Dixon

Dylan Dixon

Eric Martz

Eric Martz

Dylan Dixon

Dylan Dixon

Cena Mayo

Cena Mayo

Dylan Dixon

Dylan Dixon

Dylan Dixon

Dylan Dixon