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 can I make Non-English quotation marks with a help of CSS? [closed]

    How to make a HTML element fill a dynamically sized container using CSS

    How to manage css left property for fixed div

    How to use google font

    How to prevent Ajax long-poll from reloading div in Chrome?

    How know CSS version - ASP.NET - VS Community 2013

    How to switch between custom css layout and bootstrap css layout

    How to parse the default css property to inline style attribute

    jQuery select box Show/hide div

    How To Insert Some Content Before An HTML Element In The Runtime Using CSS

    How can I remove dependancies that are non existent or not being called on by any document?

    how can I apply css based on parent div class

    How: have more than one CSS sprite on a page

    How to CSS border spacing (or) padding background image separately?

    How do you centre two icons (images) side by side in footer?

    How to get CSS to work only on specific WordPress pages?

    How to make an image fully flexible in terms of display size?

    css how to force a layer to be in the back (z-index doesn't work)

    Text overlay over image on hover. How to stop other divs from moving

    How to put the menu over the content?

    How can I get my divs to process separately?

    CSS - How to make a relative element follow me up and down but not left and right?

    How to display Highcharts in rows (5)

    How to make form line up?

    Bootstrap “jumbotron-narrow” example. how does the style change?

    How can I style this php with divs?

    How can I position a web page in the middle of the screen?

    How to make a text or html tag look like a button

    How to send an HTML file with css?

    How to morph multi-part css properties with Mootools Fx?