CSS to position one div under another that is float: left

Question

I have this:

<div class="listing-thumbnail"><a href="http://domain-name.com/thislisting/"><img 

class="wpbdmthumbs" src="http://domain-name.com/wp-

content/uploads/2013/04/dancegroup-300x300.jpg" style="max-width: 300px;"/></a>
</div>

<div class="listing-details">

    <div class="field-value wpbdp-field-endmonth meta"><span 

class="value">March</span></div>

    <div class="field-value wpbdp-field-enddaynumber meta"><span 

class="value">10</span></div>

    <div class="field-value wpbdp-field-citystatezip meta"><span 

class="value">Northampton, Massachusetts 01060</span></div>

</div>

which displays like this:

|image....| March 10 Northampton, Massachusetts 01060
|..............|
|_______________|

But I want it to display like this:

|image....| March 10
|..............| Northampton, Massachusetts 01060
|_______________|

All fields are pulled from a WP database entry dynamically.

Currently, the css for the March field and other date related fields before it, in order to get them to line up on the same line, is like this for each field:

#content .wpbdp-listing .wpbdp-field-endmonth .wpbdp-field-enddaynumber .value { float: left; }

My question is, what css can I apply to cause the city-state-zip div, and those that follow it, start on the next line below the date info rather than be on the same line with the date info?

Note that the fields following the city-state-zip div behave nicely and all start on their own lines.

I added float:left to get the date fields all on the same line instead of in a column.

These divs are all within another div along with more. As is, without my added float left for the date elements, they all line up vertically down the page, one after another.

The divs following the city-state-zip each start on a new line. I want the city-state-zip elements on one line.

Note that clear: left and clear: all didn't work out as there is an image to the left of these divs and it pushed the city div below that, as follows:

|image....| March 10
|..............|
|_______________|
Northampton, Massachusetts 01060

Solution 1

use clear:both; in class field-value wpbdp-field-citystatezip

Solution 2

You can use display: block on the element that contains the city/state/zip to make it start a new line. Make sure that only your date fields have a float: left on them. If the city/state/zip has a float: left as well as display: block, then it will just float to the left as far as possible, which would be to the right of the date fields.

Why can't you just put a <br /> between the divs that contain your dates and the city/state/zip?