CSS Clear Float not working

Question

Having an issue with clearing floats that I have used and I don't understand why it is not working.

I have got some information in a three column layout and I have tried clearing the floats so that I can continue adding information below,however it is not going below.

HTML

<div class="aboutme">
<h1>About Me</h1>
<p>
<br>
<br>
<a>My name is <strong>Richard Warner</strong> and I am a young web designer from          Birmingham, UK. I have recently graduated from Manchester Metropolitan University having studied BSc(Hons) Multimedia Computing</a>. 
</p>
</div>

<div class="skills">
<h1>Skills & Expertise</h1>
<p>
<br>
<br>
<ul id="skilllist">
<li><a>HTML & CSS</a></li>
<li><a>PHP</a></li>
<li><a>MySQL</a></li>
<li><a>Wordpress</a></li>
<li><a>Adobe Photoshop</a></li>
<li><a>Adobe Dreamweaver</a></li>
</ul>
</p>
</div>

<div class="cv">
<h1>My CV</h1>
<p>
<br>
<br>
<a>You can download my CV by clicking here</a>
</p>
</div>

</div>
<div id="clear"></div>
<div id="portfolio"><a>addsassadasd</a>
</div>

CSS

.aboutme {
width: 300px;
height: 210px;
border: solid 1px #000;
float: left;
}

.skills {
width: 300px;
height: 210px;
border: solid 1px #000;
float: left;
margin-left: 27px;
}

.cv {
width: 300px;
height: 210px;
float: left;
border: solid 1px #000;
margin-left: 27px;

}

#clear {

clear:both;
}

I have checked to make sure I have closed DIV tags and they are all closed. Any help will be appreciated, thanks.

Answer 1

You have an extra </div> near the end. What is the expected behavior? Your code on jsFiddle does seem to render just as it should. Everything after the clearing div is below the floating elements that are above it.

<div id="clear"></div>
<div id="portfolio"><a>addsassadasd</a>
    This is below the floats above<br>
    Not a word of a lie
</div>

Answer 2

check this if it helps :

http://jsbin.com/ofunas/4/

CSS:

.aboutme {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;

}

.skills {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;
margin-left: 27px;
}

.cv {
width: 300px;
height: 310px;
float: left;
border: solid 1px #000;
margin-left: 27px;

}

#clear {
display:block;
clear:both;
}
.div4 {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;
margin-top:20px;
}