Log in / Register

Forum › How do I...?

Two column layout - child topics not flowing after parent topic

mknight
Hi there

I am working on a two column layout, where I have this sort of structure:

<article class="two_column">
  <h1>Title</h1>
    <p>Text…</p>
      <article>
        <h2>Sub title</h2>
          <p>Text…</p>
      </article>
      <article>
        <h2>Sub title</h2>
          <p>Text…</p>
      </article>
</article>


The CSS is like this:

.two_column {
    column-count: 2;
    column-gap: 10mm;
    column-fill: auto;
}


When I create a PDF, the text in the parent article fills both columns and the text in the two child articles just fills the first column.

Ideally, I would like the parent article to fill column 1 and the two child articles to fill column 2.

What am I missing?

Thanks

Matt
markbrown
Hi,

The above CSS should flow all of the content into the first column, then into the second column once the first is full. To split content evenly between the two columns you can set the column-fill value to "balance" instead of "auto".

You can also use "break-before: column" to force content (e.g., the first child article) into a new column, if that's what you're after.

Mark
mknight
Thanks Mark

I've tried setting column-fill to "balance" and the same thing is happening. I have attached a screenshot of the output.
howcome
Could you post your source code?
mknight
The source is from a DITAmap:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE map PUBLIC "-//OASIS//DTD DITA Map//EN" "map.dtd">
<map id="ditamap-6170" class="- map/map ">
    <title class="- topic/title ">Column test</title>
    <topicref href="overview.dita" class="- map/topicref ">
        <topicref href="details.dita" class="- map/topicref "/>
        <topicref href="contact.dita" class="- map/topicref "/>
    </topicref>
</map>


The HTML source looks like this:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html
  SYSTEM "about:legacy-compat">
<html xmlns:table="http://dita-ot.sourceforge.net/ns/201007/dita-ot/table">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="UTF-8">
      <meta name="copyright" content="(C) Copyright 2024">
      <meta name="DC.rights.owner" content="(C) Copyright 2024">
      <meta name="DC.Type" content="map">
      <meta name="DC.Format" content="HTML5">
      <meta name="DC.Identifier" content="ditamap-6170">
      <title></title>
   </head>
   <body xmlns:related-links="http://dita-ot.sourceforge.net/ns/200709/related-links" xmlns:opentopic-func="http://www.idiominc.com/opentopic/exsl/function" id="ditamap-6170">
<h1 class="cover-page-container">
  <div class="cover-page-content">
    <div class="title-text">Column test</div>
    <div class="bottom-stripe">
      <div class="logo-container">
        <div class="logo">
        </div>
      </div>
    </div>
  </div>
</h1>
      <h1 class="title topictitle1">Column test</h1>
      <nav>
         <ul class="map">
            <li class="topicref"><a href="#concept-9697">Overview</a><ul>
                  <li class="topicref"><a href="#concept-7351">Details</a></li>
                  <li class="topicref"><a href="#concept-1123">Contact</a></li>
               </ul>
            </li>
         </ul>
      </nav>
      <article class="topic concept nested0 two_column" aria-labelledby="ariaid-title1" lang="en-gb" id="concept-9697">
         <h1 class="title topictitle1" id="ariaid-title1">Overview</h1>
         <div class="body conbody">
            <p class="p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
               ut labore et dolore magna aliqua. Non enim praesent elementum facilisis leo vel fringilla
               est ullamcorper. Enim diam vulputate ut pharetra sit amet aliquam id diam. Luctus
               accumsan tortor posuere ac. In nibh mauris cursus mattis molestie a iaculis at erat.
               Nullam non nisi est sit. Nisi scelerisque eu ultrices vitae auctor eu. In tellus integer
               feugiat scelerisque. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Dapibus
               ultrices in iaculis nunc sed augue lacus. 
            </p>
            <p class="p">Cursus eget nunc scelerisque viverra mauris in aliquam. Fermentum iaculis eu non diam
               phasellus vestibulum lorem sed risus. Venenatis cras sed felis eget velit aliquet
               sagittis id consectetur. Et netus et malesuada fames. Consectetur libero id faucibus
               nisl tincidunt eget. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum
               tellus. Diam in arcu cursus euismod. Egestas purus viverra accumsan in nisl nisi scelerisque
               eu ultrices. Eget dolor morbi non arcu risus quis varius quam. Ac auctor augue mauris
               augue neque gravida. 
            </p>
         </div>
         <article class="topic concept nested1" aria-labelledby="ariaid-title2" lang="en-gb" id="concept-7351">
            <h2 class="title topictitle2" id="ariaid-title2">Details</h2>
            <div class="body conbody">
               <p class="p">Sit amet mauris commodo quis imperdiet massa tincidunt. Eget aliquet nibh praesent
                  tristique magna sit. Accumsan sit amet nulla facilisi. At volutpat diam ut venenatis
                  tellus in. Penatibus et magnis dis parturient montes nascetur. Tincidunt lobortis
                  feugiat vivamus at. Non tellus orci ac auctor augue mauris augue neque gravida. Nunc
                  faucibus a pellentesque sit amet. Nec feugiat nisl pretium fusce id velit ut. Semper
                  quis lectus nulla at volutpat diam ut venenatis tellus. Lorem ipsum dolor sit amet
                  consectetur adipiscing elit ut aliquam. 
               </p>
               <p class="p">Fermentum dui faucibus in ornare quam viverra orci. Enim ut tellus elementum sagittis
                  vitae. Vitae proin sagittis nisl rhoncus mattis. Feugiat vivamus at augue eget arcu
                  dictum varius duis. Egestas diam in arcu cursus euismod quis viverra nibh cras. Enim
                  nulla aliquet porttitor lacus luctus accumsan.
                  
                  Urna neque viverra justo nec ultrices dui. Sollicitudin tempor id eu nisl nunc mi
                  ipsum. Sed viverra tellus in hac. Ultrices neque ornare aenean euismod elementum nisi
                  quis. Ut etiam sit amet nisl purus in. 
               </p>
               <p class="p">Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum
                  faucibus vitae. Ante in nibh mauris cursus mattis molestie a. Etiam sit amet nisl
                  purus in mollis nunc sed. 
               </p>
            </div>
         </article>
         <article class="topic concept nested1" aria-labelledby="ariaid-title3" lang="en-gb" id="concept-1123">
            <h2 class="title topictitle2" id="ariaid-title3">Contact</h2>
            <div class="body conbody">
               <p class="p">Diam vulputate ut pharetra sit amet aliquam.
                  
                  Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. Ultrices tincidunt
                  arcu non sodales neque sodales. 
               </p>
               <p class="p">Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Nunc sed velit dignissim
                  sodales. Auctor elit sed vulputate mi sit amet mauris commodo quis. Viverra tellus
                  in hac habitasse platea dictumst. 
               </p>
               <p class="p">Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Donec
                  enim diam vulputate ut pharetra sit amet aliquam id. Et molestie ac feugiat sed. Consectetur
                  a erat nam at lectus urna. Risus quis varius quam quisque id diam vel quam. Nisi scelerisque
                  eu ultrices vitae auctor. Vitae turpis massa sed elementum tempus egestas sed sed.
                  Sit amet volutpat consequat mauris nunc congue. 
               </p>
            </div>
         </article>
      </article>
   </body>
</html>
mknight
Here is a screenshot showing the output that I currently get.
  1. Screenshot 2024-02-22 at 13.05.27.png‎ 82.1 kB
howcome
Could you post the style sheet as well?

(When using only your style snippet above, I get the attached PDF. Which seems closer to what you want?)
  1. foo.pdf‎ 48.5 kB

Edited by howcome

mknight
Yes, that is exactly what I am trying to achieve.

Here is my stylesheet:

@page {

margin-left: 25mm;
margin-right: 25mm;
margin-top: 20mm;


/* BODY */
@page:left{
    @top-right{
        content: "";
        display: none;
        letter-spacing: 0.025em;
        line-height: 1em;
        font-weight: bold;
        color: #000;
        font-size: 18px;
    }
    @top-left{
        font-size: 18px;
        color: #000;
        font-style: normal;
        font-weight: bold;
        text-transform: none;
        content: "";
        display: none;
        letter-spacing: 0.025em;
        line-height: 1em;
    }
    @bottom-left{
        content: "";
        letter-spacing: 0.025em;
        color: #fff;
        font-style: normal;
        border: none;
        background-color: transparent;
        font-size: 18px;
        font-weight: bold;
    }
    @bottom-right {
        font-size: 18px;
        border: none;
        background-color: transparent;
        font-style: normal;
        font-weight: normal;        
        font-size: 18px;
        color: #fff;
        font-weight: bold;
        content: "";
        display: none;
    }
}

@page:right{
    @top-right{
        content: "";
        display: none;
        letter-spacing: 0.025em;
        line-height: 1em;
        font-weight: bold;
        color: #000;
        font-size: 18px;
    }
    @top-left{
        font-size: 18px;
        color: #000;
        font-style: normal;
        font-weight: bold;
        text-transform: none;
        content: "";
        display: none;
        letter-spacing: 0.025em;
        line-height: 1em;
    }
    @bottom-left{
        content: "";
        letter-spacing: 0.025em;
        color: #fff;
        font-style: normal;
        border: none;
        background-color: transparent;
        font-size: 18px;
        font-weight: bold;
    }
    @bottom-right {
        font-size: 18px;
        border: none;
        background-color: transparent;
        font-style: normal;
        font-weight: normal;        
        font-size: 18px;
        color: #fff;
        font-weight: bold;
        content: "";
        display: none;
        letter-spacing: 0.025em;
    }
}

.two_column {
    column-count: 2;
    column-gap: 10mm;
    column-fill: balance;
    break-inside: avoid-column !important;
}
howcome
@page constructs cannot be nested, you must add a right curly bracket:
@page {
  margin-left: 25mm;
  margin-right: 25mm;
  margin-top: 20mm;
}

Edited by howcome

mknight
Thanks for spotting that!