Trouble understanding how divs work - css

Question

I have a div below two floating divs (one floating left and the other right). As I opened up the element inspector I noticed something odd. Why is it that a div below that with the css property clear: both overlaps the top two? Also, when I change the height of the div, the element inspector shows that the div no longer contains its contents. Here are two screenshots to show what I mean. The code is below the screenshots.
No height set in css:
Height of class "tags" set to 200px in css:
HTML for page
CSS for page

Answer 1

You have syntax errors in your CSS. You have some classes inside of other classes which won't work and also you have some unclosed brackets. I fixed it below
#container {
width: 900px;
min-height: 500px;
margin: auto;
background: #DDDDDD;
}
.entry {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.title {
text-align: center;
}
.name {
padding: 0px 10px;
}
.tag {
display: inline-block;
}
.link {
border: 1px solid black;
display: inline-block;
padding: 10px;
text-decoration: none;
}
.info {
width: 610px;
margin: auto;
}
.input-text_area {
width: 300px;
height: 250px;
padding: 0;
border: none;
resize: none;
}
.input-text_field {
width: 300px;
padding: 0;
margin: 0;
border: none;
}
.input-button {
width: 75px;
height: 50px;
margin: 2px 0px;
display: block;
float: right;
}
select {
float: right;
margin: 0px;
}
.right_half {
float: left;
padding: 1px;
height: 300px;
width: 300px;
}
.left_half {
float: left;
padding: 1px;
height: 300px;
}
.tags {
height: 200px;
}
label {
display: block;
}
.text_field {
width: auto;
}
.block-label {
display: block;
}