Controlling Distribution w/ Column Count

ISSUE: http://www.offprint.am/0811861538/

Is there a way to prevent the content contained within a single p /p from being split between columns? Containing it within a div and giving it a height property seems to work, but I'm looking for something a little more versatile/not on an entry by entry basis.

Ideally, unless there's a HUGE amount of text (http://www.offprint.am/wp/3836516861/) I want the description to be on the left and the information to be on the right. I was able to do this with two divs (float:left) outside of the column container, but I struggled to get them centered.

The latter (w/ divs) would be the preferred solution, but I'll开发者_JS百科 take any help I can get right now.

Aside:

.entry is the main container w/ column-count et al. For the float work around, I made two containers (.desc & .info) display: block; float:left and borrowed the border/spacing properties from .entry (.desc padding-right:30px; border-right: 1px dashed #eee; / .info padding-left: 30px;)

Although it did what I wanted it to for the most part, it simply wouldn't center.

---

remove from .entry the following:

-moz-column-count: 2;
-moz-column-gap: 60px;
-moz-column-rule: 1px dashed #EEEEEE;

add add overflow: hidden;

Then modify .entry p to:

.entry p {
    border-right: 1px dashed #EEEEEE;
    float: left;
    margin: 0 30px 15px 0;
    padding-right: 30px;
    width: 395px;
}

also add the following:

.entry .info { float: left; width: 300px; }