CODEWITHSUNDEEP
htmlcsscoldfusion
Arnkrishn
Arnkrishn

Reputation: 30442

div tag inside a cfloop tag introduces unwanted line breaks

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 difference here is that I'm using div tag inside cfloop tag.

Please let me know where I'm going wrong.

cheers

Upvotes: 1

Views: 650

Answers (4)

Rich
Rich

Reputation: 87

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>

Upvotes: -1

Peter Boughton
Peter Boughton

Reputation: 112220

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.

Upvotes: 2

Dave Quested
Dave Quested

Reputation: 786

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

Upvotes: 0

Heat Miser
Heat Miser

Reputation: 19768

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.

Upvotes: 14

Related Questions