Styling dynamic content where there isn't always content - html

Question

OK, so my title is terrible. Anyway-
I'm trying to style a simple "product info" template. The CMS I use is drawing in dynamic product information from tags. Looks like this- the divs are styled so they line up as two columns:
<div class="specslabel">
<strong>
{rs_size_lbl} <br />
{rs_material_lbl} <br />
{rs_application_lbl} <br />
{rs_fitting_system_lbl}
</strong>
</div>
<div class="specs">
{rs_size} <br />
{rs_material} <br />
{rs_application} <br />
{rs_fitting_system}
</div>
It all works fine when all those tags are pulling in information properly. However, sometimes one of those fields (it draws from a CSV file) is empty. The tags are smart and won't show the {_lbl} (field label) content if there is no content in the according field. Then there is a blank line, obviously because of the line break.
If I don't use line breaks, the "_lbl" tags all stack up (since the labels are generally short text). Is there another way to style this so that when no content is drawn in, there is no line break- but when there is content, there is a line break?

Answer 1

Rewrite your HTML to put the label with the item.
<div><span class="specslabel">{rs_size_lbl}</span><span class="specs">{rs_size}</span></div>
<div><span class="specslabel">{rs_material_lbl}</span><span class="specs">{rs_material}</span></div>
<div><span class="specslabel">{rs_application_lbl}</span><span class="specs">{rs_application}</span></div>
<div><span class="specslabel">{rs_fitting_system_lbl}</span><span class="specs">{rs_fitting_system}</span></div>
Then, define your CSS as
.specslabel {
display: inline-block;
width: 45%;
}
.specs {
}
What will happen is, when neither the label nor the data gets anything, your html for that line item will be rendered as <div></div>, which has no height by default. Thus the blank space will be collapsed when there is nothing in the div to show.

Answer 2

I'd recommend altering your markup to something like this:
<div class="specs">
<div class="spec">
<span class="label">{rs_size_lbl}</span>
<span class="data">{rs_size}</span>
</div>
<div class="spec">
<span class="label">{rs_material_lbl}</span>
<span class="data">{rs_material}</span>
</div>
<div class="spec">
<span class="label">{rs_application_lbl}</span>
<span class="data">{rs_application}</span>
</div>
<div class="spec">
<span class="label">{rs_fitting_system_lbl}</span>
<span class="data">{rs_fitting_system}</span>
</div>
</div>
Then style span.label and span.data to have a fixed width so they align properly. If they're empty, they should be invisible.

Answer 3

If you format it in the following manner there'd be no issues:
<style>
strong span { float:left; clear:left; }
</style>
<strong>
<span>{rs_size_lbl}</span>
<span>{rs_material_lbl}</span>
<span>{rs_application_lbl}</span>
<span>{rs_fitting_system_lbl}</span>
</strong>
Otherwise, you'd need to alter the server script to output the <br/> appropriately ...