Search code examples
htmlcssalignmentmultiple-columnsvertical-alignment

vertically misaligned CSS columns with mixed text structure

I'm generating html code which is supposed to be put on a two columns div:

 <!DOCTYPE html>
    <head>
    <meta charset="utf-8" />
    <style>
    .legendext{ column-count:2; column-gap:10pt; text-indent:0.0cm; margin-left:1.0cm; margin-right:1.0cm;}
    </style>
    <body>
    <figure>
    <div class="legendext">
    <dl>
    <dt><span>Definition 1</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    <ul>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    </ul>
    </dd>
    <dt><span>Definition 2</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </dd>
    <dt><span>Definition 3</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </dd>
    </dl>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </div>
    <figcaption>Figure : My figure.</figcaption>
    </figure>
    </head>

For an incomprehensible reason, my columns are not correctly vertically aligned (balanced) like this:

enter image description here

I had a look on this topic Vertically Misaligned CSS Columns and tried to modify my code according to the answer but It doesn't give me the expected result:

enter image description here

The list in two columns is correctly balanced but the rest of my text is not showed in two columns.

This answer is supposed to work with a single ordered list and not with a mixed structure of html tags like in my code.

Does anyone know what is wrong with my code and how to make my columns correctly balanced ?

Solution 
  • *{
        margin: 0px;
    }
.legendext
{ 
    column-count:2; 
    column-gap:10pt; 
    text-indent:0.0cm; 
    margin: 5rem;
    }
    .legendext dd {
        margin: 2.5rem 0rem;
    }


    p {
        margin: .5rem 0rem;
    }

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<figure>
<div class="legendext">
<dl>
<dt><span>Definition 1</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
<ul>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
</ul>
</dd>
<dt><span>Definition 2</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</dd>
<dt><span>Definition 3</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</dd>
</dl>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</div>
<figcaption>Figure : My figure.</figcaption>
</figure>

</body>

</html>