div tag inside a cfloop tag introduces unwanted line breaks

Question

Hi

I have a web page in coldfusion which shows contents from a SQL table. The contents are iterated using cfloop and are rendered using a div block. My code snippet follows-

<cfloop query="qry1">
<div class="subBlock">
    <div class="item"><h4>Date:</h4><p>#qry1.date#</p></div>
    <div class="item"><h4>Name:</h4><p>#qry1.name#</p></div>
    <div class="item"><h4>Address:</h4><p>#qry1.address#</p></div>
</div>
</cfloop>

What gets shown on the page looks like-

Date:

06/01/2009 03:40 PM

Name:

XYZ ABC

Address:

ZZZ St.

So the problem is that I'm getting those line breaks. Whereas what I want is something like this-

Date:06/01/2009 03:40 PM

Name:XYZ ABC

Address:ZZZ St.

I'm using a similar div at another page and it is shown correctly there. The only differene here is that I'm using div tag inside cfloop tag.

Please let me know where I'm going wrong.

cheers

Answer 1

The h4 has an implicit line break after it, as well as the p. You can either use a CSS style of display: inline-table for the h4, or use a span and apply a class that makes it look like the h4 style you wish.

Answer 2

If you want to keep the current tag structure you could float the P tags in your CSS. Something like (untested):

.subBlock .item p { float: left; }

Personally I'd restructure the tags to this:

<div class="subBlock">
    <div class="item"><p><strong>Date: </strong>#qry1.date#</p></div>
    ...
    ...
</div>

or

<div class="subBlock">
    <div class="item"><p><span class="title">Date: </span>#qry1.date#</p></div>
    ...
    ...
</div>

then apply a style for the span .title class

Answer 3

In addition to what the other answers have said about h4 and p having default block-level styling, headings are generally intended for document sections, not for labelling specific pieces of information.

Consider using a definition list, which is (arguably) more semantically correct:

<cfloop query="qry1">
    <dl class="party_details">
        <dt>Date:</dt><dd>#qry1.date#</dd>
        <dt>Name:</dt><dd>#qry1.name#</dd>
        <dt>Address:</dt><dd>#qry1.address#</dd>
    </dl>
</cfloop>

Then some CSS similar to:

dl.party_details dt
{
    float:left;
    clear:left;
    font-weight: bold;
}

dl.party_details dd
{
    float:left;
    clear:none;
}

(probably needs tweaking)

Alternatively, a regular ul/li with a span class="title" might be preferred.

Answer 4

use a table, much easier to control the layout and appearance that using div, p, and h4 tags. divs especially can sometimes do some strange things when I use them.

<table>
<cfloop query="qry1">
<tr>
  <td class="item">Date: #qry1.date#</td>
</tr>
<tr>
  <td class="item">Name: #qry1.name#</td>
</tr>
<tr>
  <td class="item">Address #qry1.address#</td>
</tr>
</cfloop>
</table>