Collapsing Definition List

HTML & CSS
1

I have a Definition List which displays User Info below someone’s photo in the Comments section.

The problem I just discovered, is that when a user doesn’t complete all of the optional Profile fields, my Definition List is collapsing.

Here is a screenshot…

Things should appear like this…


Joined:
Location:
Posts

Originally I was thinking this was a PHP/mySQL issue, and that my code needs to replace a NULL value with something else so things don’t collapse, but now I am wondering if crafting some smart CSS might accomplish the same thing, and with less fuss?!

I was thinking of adding <br />, but I’m not sure that is right.

Oh, btw, here is a code snippet…


	<dl>
		<dt>Joined:</dt>
		<dd>"
		. date('M Y' , strtotime($joinedOn)) .
		"</dd>

		<dt>Location:</dt>
		<dd>"
		. str2htmlentities($location) .
		"</dd>

		<dt>Posts:</dt>
		<dd>"
		. str2htmlentities($posts) .
		"</dd>
	</dl>

Any way to fix this issue using HTML or CSS? :-/

Thanks,

Debbie

2

I discovered that either this…


	<dt>Location:</dt>
	<dd>"
	. (!empty($location) ? str2htmlentities($location) : '<br />') .
	"</dd>

or this…


	<dt>Location:</dt>
	<dd>"
	. (!empty($location) ? str2htmlentities($location) : '&nbsp;') .
	"</dd>

…seems to solve the problem.

(For all you non-PHP’ers out there, that code either inserts a <br /> or a   if there was no Location: found in the database.)

I am still curious if there is a way to handle this with CSS, though.

Anyone?

Thanks,

Debbie

3

would adding “clear:both;” on the dt tag solve this? My guess is the float on am empty dd is allowing the float on dt to align next to the empty dd.

dt { clear: both }
4

Maybe clear: left, as you don’t want to clear content to the right when it’s been given.

5

Is there any problem having my PHP just insert a  ??

Debbie

6

They’ll still stay on the same line, though. You want the dt to be on a new line.

7

The PHP code I posted above fixed things.

Debbie

8

This seems like a CSS issue, not a PHP issue. I think cpradio and ralph have the right idea.

9

The problem with definition lists is that you can’t easily have a clean break between the dt and the dd as they have no parent wrapped around each pair. Therefore if the dt or dd runs to zero lines or perhaps either runs to a few lines then you get a mismatch when the dt is floated because content will rise up or won’t be pushed down.

The only foolproof solution (apart from your scripting fix) is to use inline-block instead and to apply widths. This demo is from a similar thread a while back and shows that it works for any amount of content in either column and will still match up.