div positioning, odd behavior - html

Question

I'm working on a single page web design, i want to use hrefs with # to link different places in the same archive, the desired functionality is to move to the link location when clicking, this works BUT, only if i float left A,B divs,
i dont understand this, A and B divs are containing other stuff already, but if i dont put the float: left in the css, links dont work. Why is that?
#A,
#B {
float: left;
}
.cont1 {
width: 100%;
height: 1500px;
background-color: #2077a5;
float: left;
}
<div id="nav">
<ul>
<li>About
</li>
<li>Portfolio
</li>
</ul>
</div>
<div id="A">
<div id="about" class="cont1">
About page content goes here.
</div>
</div>
<div id="B">
<div id="portfolio" class="cont1">
Portfolio page content goes here.
</div>
</div>
EDIT: Wow, that are some fast answers, thanks a lot, i think im not being understood, my question is WHY if i dont set any style for A and B divs links dont work, dont they expand a locate automatically by being containers of style defined divs?

Answer 1

If you insist on using the float:left; for #A and #B, add clear:both; to that first rule to have them NOT begin at the same line(in which case the local anchors wouldn't make any sense):
#A,
#B {
float: left;
clear: both;
}
http://codepen.io/anon/pen/NRRxGy
ADDITION AFTER COMMENT AND EDIT OF QUESTION:
To try and see, delete the float for A and B (http://codepen.io/anon/pen/bwwEAr) and have a look at it in the developer tools: Both #A and 'B will have a size of 1406 x 0 (!) and will be at the very same position.
That's because DIVs that only contain floated elements will have no "official" height (i.e. they won't wrap their actual contents) - search for questions about floating to get examples. So vertically the "unfloated" #A and #B are at the same height, which is why the links lead to the same scroll position. Strange stuff, but it all has to do with floated elements and how floating elements affects the height of their containers.

Answer 2

problem is you set .cont1 class for both section and make them float left with a height of 1500px. try with this css
#A, #B {
min-width: 100%;
}
.cont1 {
height: 100vh;
background-color: #2077a5;
}
you can use the id="about" and id="portfolio" for link so you don't need the extra div #A , B
<div id="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</div>
<div id="about" class="cont1">
About page content goes here.
</div>
<div id="portfolio" class="cont1">
Portfolio page content goes here.
</div>
.cont1 {
width: 100%;
height: 1500px;
background-color: #2077a5;
float: left;
}