How do I control the wrapping of these
  • items?

  • Tags: html,css

    Problem :

    As you can see in the jsfiddle, the layout looks ok when there are no lines wrapping. However, if the window gets smaller, and the <li> items start wrapping, they wrap underneath the <dt> content (which are the words one, two and three).

    What I'm trying to do is have the <li> wrap when necessary, but I want it to start the new line underneath itself, and not completely to the left. So basically, I'm trying to get all lines to wrap like the second list-item does in the first <dd> tag.

    How do I do that in CSS?

    HTML

    <article>
        <header><h2>Title</h2></header>
        <dl>
          <dt>One</dt>
          <dd>
            <ul>
              <li>This is a relatively short sentence, not really long.</li>
              <li>This is a relatively short sentence, not really long.</li>
            </ul>
          </dd>
          <dt>Two</dt><dd>This is a relatively short sentence, not really long.</dd>
          <dt>Three</dt><dd>This is a relatively short sentence, not really long.</dd>
        </dl>
    </article>
    

    CSS

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    dl {
        margin: 0 auto 5rem;
        max-width: 675px;
        font-size: 1.25rem; /* 16 x 1.25 = 20px */
        line-height: 1.6;
    }
    
    dt {
        font-style: italic;
        float: left;
        width: 7rem;
    }
    
    li {
        list-style-type: none;
        margin-left: 7rem;
    }
    
    li:first-of-type {
        margin-left: 0;
    }
    

    http://jsfiddle.net/E3QW2/1/



    Solution :

    Add overflow:hidden for your dd elements (that keeps them from flowing underneath the floated dt), and remove the margin for li:first-child:

    http://jsfiddle.net/CBroe/E3QW2/3/


      CSS Howto..

      How can I stretch an empty floating div to the full height available using css?

      Changing opacity for div in div - is this possible? How?

      hide/show html div with javascript

      How to stretch the form submit button using CSS?

      how to scroll down|up animatedly in jquery css?

      How to combine two css3 gradients ?

      How to remove CSS triangles?

      How can I center the column vertically in bootstrap mobile mode?

      How to vary color of table row border based on div that it's in

      How to fill a text with color using CSS?

      How to modify wordpress plugin css [closed]

      How can I use Modernizr to get border-radius working in IE8?

      How does this site hide the iframe scrollbar?

      How to combine jQuery animate with css3 properties without using css transitions?

      HTML/CSS: How to get the id of sub menu

      How to cancel an upstream CSS declaration?

      How to add missing browser-specific css declaration properties and prefixes to epub [closed]

      How to remove this extra part at the right?

      How to change the font-size uniformly?

      How can I click a specific li without an id or class?

      How to apply a CSS class to a SVG Text element

      How can I delete these arrows?

      Show just the necessary div when user clicks on a targeted div

      HTML emails in 2013: How to control spacing between elements like paragraphs and images?

      How to load up CSS files using Javascript?

      How to reference this line in CSS, HTML

      How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

      How to make bootstrap btn-group break into half naturally

      How to get full height of webpage with CSS?

      How can i stop my text css from over-riding my form on my blog?