display: inline/block or what? To prevent overlapping

[Spinethetic]

On the front page of my site (http://www.integralbuddha.net/) I post news clippings & articles, much like a blog; also I have two boxes displaying information on Master's degrees in Integral theory. The problem that seems to be recurring is that the title of the top news posting keeps poking in-between the boxes towards the top and I can't seem to resolve the issue. I've read many books on CSS design over the past 4 years and have felt compelled to abandon flash design in leiu of neat CSS but I am still learning and am usually able to grasp a concept a few months after reading about it.

here is the css (http://integralbuddha.net/default.css)
.degreeLeft {
float: left;
width: 40%;
padding: 13px;
background: #F9F9F9 url(images/corner.gif) no-repeat bottom right;
border: 1px solid #F0F0F0;
color: #626262;
}

.degreeRight {
float: right;
width: 40%;
padding: 13px;
background: #F9F9F9 url(images/corner.gif) no-repeat bottom right;
border: 1px solid #F0F0F0;
color: #626262;
}


I'am sure those selectors are not even coded right to comply with 'cascading' since they are nested within 'primaryContentContainer > primaryContent > degreeLeft / degreeRight'

Best Regards
~Ross :)

[boogyman]

titleElement {
clear:both;
}

I suspect presently you have clear:left without looking at the code.

[Spinethetic]

titleElement {
clear:both;
}

I suspect presently you have clear:left without looking at the code.
Ah yes, I keep forgetting that little trick, thank you.