HTML Anchor ID无效

Question

I'm making a quick site and all the content is on one page, and I'm using a small menu with anchor links to make navigating to a certain part faster for the end user. I have two anchor links that work fine (About Me, My Projects) but the "Contact Me" link jumps to a random part of the "My Projects" section.

A preview of the site is available here : http://dev.cuonic.com/cuonic.com/

I have checked the IDs, they correspond, there is no random "contact-me" ID lying around in the "My Projects" section, I've changed the ID, still happens, and this in both Firefox and Chrome. Whats going on ? Any help is appreciated :)

Answer 1

All of then content within //*[@id="content"]/div[2] is floated to the left. Floating elements don't affect the height of their containing block-level elements. If you add this:

#contact-me { clear:both; }

to your CSS somewhere, the <span id="contact-me"> tag will reposition to where you actually want it. Your page still isn't long enough for the contact form to go all the way to the top (at least on my monitor), but it will still scroll to the end of the page.

Answer 2

Change this section of code:

</div>
<span class="anchor" id="contact-me"></span>
<h1>Contact Me</h1>
<div class="text">

To this:

</div>
<h1>Contact Me</h1>
<span class="anchor" id="contact-me"></span>
<div class="text">