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

Ericjt picture Ericjt · Apr 22, 2013 · Viewed 18.6k times · Source

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

Answer

Sweety picture Sweety · Apr 22, 2013

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