How to align a HTML definition list (
) horizontally without limiting term or definition in height?

Tags: html,css,css-float

Problem :

I'm trying to align a HTML defintion list horizontally, so the term is on the left, and the definition is on the right.

Both term and definition can be very long, so they can be wider than the available width and will wrap.

With my CSS, I have no problem with definitions that wrap and so are higher than the corresponding term. But in the rare case when the term wraps and is higher than the corresponding definition, I don't get the following definition to clear properly.

You can see this in my jsFiddle, where the definition "555" does not properly align with the term "555".

Any help on how to fix this is really appreciated. Requirements:

  • I want the definition to use all available horizontal space on the right, so I don't want to use a fixed width for the <dd> tag.
  • I don't want the definition in any situation to be positioned under the corresponding term.

Solution :

This might do the trick. Add the following CSS rule:

dd:after {
    content: '';
    display: block;
    clear: both;

The pseudo-element will clear the floated <dd> element and this will ensure that the next <dt> starts on a new line.

See demo:

    CSS Howto..

    How to set numerous links in a single line with CSS?

    css: how to build centered div with minimum spacing on the left

    How to scale down CSS background-image when using various background-positions?

    How Can I Remove a Surrounding DIV with jQuery?

    How to add background image to only one page in Jade

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    Style elements based on how many elements there are using just CSS?

    CSS - How to resize texboxes with background image when browser is resized?

    Rails - how to add css to a helper method

    How to add a background image inline style to link tag Rails

    css - how to stretch a background image across the entire window

    How to CSS the select field so that it occupy the entire cell of my table?

    css for modal - how to position it above page yet scrollable in window

    efficient way to show an beside each instance

    How to change the selection tip of custom cursor using css

    How to get GWT console/development mode to generate css errors?

    I have a standard table with text inside. How do I vertical align this?

    How to reset a css animation class using jquery?

    How to use jQuery to select a class name that's transformed by css-loader?

    How to use the native browser outline in CSS?

    How to stop my css declaration from being overridden

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    How to do such layout with html+css?

    How to do grid of div elements?

    How can I get rounded corners to fit over other content?

    How to change text color of a css class?

    How do I align these links inside inline-blocks to the top?

    CSS- how to give an object with scooped corners a border colour?

    How to avoid orphaned headings in CSS columns?

    How do I deal with the issue of my divs being distorted greatly when zoomed in?