Defintion list doesn't have a height

HTML & CSS
1

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">

	<p>{L_UCP_WELCOME}</p>

<!-- IF .topicrow -->
	<h3>{L_IMPORTANT_NEWS}</h3>

	<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}
				</dt>
				<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>
				</dd>
			</dl>
		</li>
	<!-- END topicrow -->
	</ul>
<!-- ENDIF -->

	<h3>{L_YOUR_DETAILS}</h3>

	<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 -->
	</dl>
</div>

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.

2

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.

3

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)

4

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:

http://pageaffairs.com/web/css/containing-floats/

5

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

6

You’re welcome. Any time. :slight_smile: