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