Creating uniform height for Definition Terms (DT) and Definition Descriptions (

Looking to creatively style a description list <dl> in a way that showcases two columns, even when there are multiple <dd>s following the <dt>. The challenge lies in wanting this design to be dynamic without resorting to floating the <dt> and adding margins to the <dd>s.

<dl>
  <dd>Term A</dd>
  <dt>Definition A1</dt>
  <dt>Definition A2</dt>
  <dd>Term B</dd>
  <dt>Definition B1</dt>
</dl>

While the usual approach might involve leveraging solutions for creating equal height columns, the absence of a container element in this context has presented an interesting challenge. Any innovative ideas?

Check out the updated version on Fiddle

htmlcsslistheight

Answer №1

Here is a code snippet that you can try out. It may provide some assistance:

dl {
 width:100%;
 overflow:hidden;
 background:#ff0;
}
dd, dt {
 float: left;
 width:20%; /* adjust the width; make sure the total of both is 100% */
 background:#dd0;
 height: 40px;
 margin: 0;
 padding: 0;
 line-height: 250%;
}

View the JSFIDDLE DEMO here

Check out this blog for more information

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transfer data from button to input field

Trying to create a simple calculator with PHP to submit to my teacher, I have the basic HTML and PHP codes in the same file. However, I am struggling to figure out how to pass the number from a button to the text input in order to create a larger number, ...

phphtml

Toggling the status of a Blank Checkbox

Working with a set of checkboxes, one is labeled conditions[]. The final checkbox in this group is titled "none". When this checkbox is selected, it should automatically check all the other checkboxes in the array. I am currently trying to determine the b ...

jqueryhtml

Retrieve the background color using code-behind

Despite its humorous appearance, I am having trouble with the Syntax :( I have a background color in my code behind file and need to correct the syntax here so that my Table displays the correct background color: <Table style="background-color:" &apos ...

htmlcssstylesheet

Activate a pointer cursor when hovering over a TextField in Material-ui design

Hey there! I'm new to Material-ui/ReactJS and I have a question. I'm trying to change the cursor to a pointer when hovering over a Material-ui TextField, but it's proving to be quite challenging. The default behavior is 'cursor: text&ap ...

cssreactjsmaterial-ui

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)

I have designed my website with three distinct tables, each requiring unique styling. The general approach I take to apply styling to these tables is as follows: import './gameview.css' <div className="game-results"> <h ...

htmlcssreactjs

My draggable item seems stuck in place. Any ideas on how to get it moving again?

I have been trying to implement some code I found on this link. Despite adding all the necessary file links, the code is not functioning as expected. It should be able to move within the bounds of a container, but it's not working properly. var max ...

javascripthtmljquerycssjquery-ui-draggable

The React Material UI table is having trouble stretching to fill the space

Currently, I am experimenting with developing my own virtualization technique using a different approach than react-virtualized. However, I am encountering difficulties when it comes to styling. I have come across an issue where the material table in the ...

cssreactjsmaterial-ui

Generating a compilation of various inputs and calculating the average result

I need help writing a code to achieve the following task. Can someone please guide me on the right path and demonstrate what steps I should take? Thank you! Example: Enter a number (-9999 to end): 7 Enter a number (-9999 to end): -5 Enter a number (- ...

pythonlist

The code inside the if statement is somehow executing even when the if statement is not true

Similar Question: Issue with jQuery function running at inappropriate times I've spent several hours trying to figure out why my function isn't working properly. I have a function inside an if ($window.width() < 1000) statement, but it se ...

javascriptjqueryhtml

Should the text underneath the image be placed above the rest of the images?

In the process of developing my game, I encountered a challenge where text needs to be dragged under specific images. To achieve this, I envision creating tabs below the images for the text to be dragged onto. My initial approach involved wrapping each im ...

htmlcssimagetabs

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

Can you explain the intended function of .reference in the CSS code provided?

Currently delving into some sample HTML from codrops. I came across the following CSS styling. After scouring the web, it seems others have used span.reference, but I can't seem to grasp the purpose of .reference. Any insights would be much appreciat ...

cssmenu

The Surprising Nature of <div> when containing <a> (anchor tags)

There are 3 div elements on a page. div { display: inline-block; margin: 10px; width: 200px; height: 200px; background-color: #333; color: white; text-align: center; } <div></div> <!--Div ...

htmlcss

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

Email confirmation section

I'm in the process of setting up a subscription newsletter page, and everything seems to be working correctly except for the part where I need users to enter their email address twice. The second email field is meant for confirmation purposes, but I&a ...

phphtml

Incorporating a search bar into a container in WordPress

I was trying to include a search form inside a div using the code below: printf( '<div class="entry"><p>%s</p>%s</div>', apply_filters( 'genesis_noposts_text', __( 'Try again below.', 'genesis&apo ...

phphtmlwordpressgenesissearch-form

The background image is not adjusting properly to the browser when resized

I'm having trouble keeping my background image fitted to the browser when I resize the window. Can someone please assist me with this issue? Here are links to images that illustrate what's happening: View images. The first image shows how it shou ...

imagebrowserbackground-imagestretchcss

The HTML5 webpage is failing to send a JQuery Ajax request

I am encountering an issue with my Ajax setup on a HTML page. The call to a web service does not seem to be working as intended, and I suspect that the ajax call is not even reaching the web service at all. The problem arises when I click the button, an e ...

jqueryajaxhtmlwcf

What is the process for linking a specific HTML file to a URL?

After preparing all my HTML, CSS, and JS files for upload to a server (I am using cPanel which I have experience with), I found myself wondering how to assign a specific HTML file to a custom link, such as "devwebdevelopment.com/about" I am looking to cre ...

htmlcpanel

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

htmlcssheaderfooter