Defintion list doesn't have a height

Simply as I have mentioned in the title, and reason why this is a problem is that on the outside of the definition list there is a div containing it, but in the site it looks screwed up because the div won’t go past the definition list (and I know this because there is a border that stops right before it. I’ll just post the code I’m having difficulty with… Maybe I’m forgetting to close a tag somewhere…

<div class="panel">


<!-- IF .topicrow -->

	<ul class="topiclist cplist">
	<!-- BEGIN topicrow -->
		<li class="row<!-- IF topicrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
			<dl class="icon" style="background-image: url({topicrow.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
				<dt <!-- IF topicrow.TOPIC_ICON_IMG -->style="background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;"<!-- ENDIF -->>
					<!-- IF topicrow.S_UNREAD --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a><br />
					<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
					<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
				<dd class="lastpost"><span>{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
					<a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{topicrow.LAST_POST_TIME}</span>
	<!-- END topicrow -->
<!-- ENDIF -->


	<dl class="details">
		<dt>{L_JOINED}:</dt> <dd>{JOINED}</dd>
		<dt>{L_VISITED}:</dt> <dd>{LAST_VISIT_YOU}</dd>
		<dt>{L_TOTAL_POSTS}:</dt> <dd><!-- IF POSTS_PCT -->{POSTS}<!-- IF S_DISPLAY_SEARCH --> | <strong><a href="{U_SEARCH_USER}">{L_SEARCH_YOUR_POSTS}</a></strong><!-- ENDIF --><br />({POSTS_DAY} / {POSTS_PCT})<!-- ELSE -->{POSTS}<!-- ENDIF --></dd>
		<!-- IF ACTIVE_FORUM --><dt>{L_ACTIVE_IN_FORUM}:</dt> <dd><strong><a href="{U_ACTIVE_FORUM}">{ACTIVE_FORUM}</a></strong><br />({ACTIVE_FORUM_POSTS} / {ACTIVE_FORUM_PCT})</dd><!-- ENDIF -->
		<!-- IF ACTIVE_TOPIC --><dt>{L_ACTIVE_IN_TOPIC}:</dt> <dd><strong><a href="{U_ACTIVE_TOPIC}">{ACTIVE_TOPIC}</a></strong><br />({ACTIVE_TOPIC_POSTS} / {ACTIVE_TOPIC_PCT})</dd><!-- ENDIF -->
		<!-- IF WARNINGS --><dt>{L_YOUR_WARNINGS}:</dt> <dd class="error">{WARNING_IMG} [{WARNINGS}]</dd><!-- ENDIF -->

The definition list that has the class of “details” is the one I’m having trouble with, tell me if you need anymore information, but I can’t post a link to the site, as I’m working on it through localhost.

To help much, we’d need your CSS, and the actual generated HTML, rather than all that extra CMS code (or whatever it is). But at a guess, try adding overflow: hidden to the container div. Otherwise post a test page with the HTML and CSS together.

Holy crap! “overflow: hidden” actually worked perfectly! But could you explain to me why you guessed that? Or why you thought that might have worked? (for future reference)

It sounds like your <dl> is floated. By default, a container (like a div) does not wrap around a floated element. Floated elements “hang out” of containers by default. To force the container to enclose the floated object, there are a few methods, but the easiest is to add overflow: hidden to the container. :slight_smile:

Here’s a more detailed answer:

Thanks for the link and the help, greatly appreciate it!

You’re welcome. Any time. :slight_smile: