How to create a two column text with a breakpoint

Question

I am trying to create a div that contains two texts. The first text should be in the first column and expand to the second column if its a large text. The second text should be in the second column, but above the expanded text from the first column.

Something like this:

How should I implement something like this with HTML and CSS?

There is nothing in css that will allow you to do this - also why would you want to it doesn't read properly and makes for bad ux — Pete, Nov 11 '19 at 15:41
@pete I don't agree with this layout also, but unfortunately I have to stick with it. — Ravers, Nov 11 '19 at 15:46
I guess you could do something like this: https://stackoverflow.com/questions/48384202/two-columns-auto-filled-with-an-image-on-top-of-the-second-column-magazine-li and use js to calculate the height of the second column text — Pete, Nov 11 '19 at 15:54
Does this answer your question? [CSS column breaks?](https://stackoverflow.com/questions/6424088/css-column-breaks) — zero298, Nov 11 '19 at 15:55
Or this https://stackoverflow.com/questions/48953580/automatically-splitting-text-content-into-even-columns/48954376#48954376 — Carol Skelly, Nov 11 '19 at 16:49

G-Cyrillus · Answer 1 · 2019-11-11T19:14:09.343

You could try to play with float and clear to push a text to next column.

here is an example pushing a title to next column ussing css variable to reset height of the clearer.

//make this a function to fire on load and resize
var getIt = document.getElementById("test1");
var thisTall = getIt.offsetHeight + "px";
getIt.style.setProperty("--hgt", thisTall);

div {
  column-count: 2;/* to use float properies within */
  border: solid; /* see me */
  column-fill: balance;/*not optionnal*/
  /* min-height: could be used too */
}

div::before {
  content: '.';
  float: left;
  min-height: var(--hgt);
  /* see me */
  width: 3px;
  background: red;
}

h2, p::first-line {
  clear: both;
  color: red;
  float: left;
  width: 100%;
  margin-top: 0;
  text-align: center;
}

p {text-align:justify}

<div id="test1">
  <h2>Title sent to next column</h2>
  <p>!! the script is not fired on resize !! <br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

</div>

or codepen to play with.

The text stands in first here , so it can be cleared from a floatting pseudo.

How to create a two column text with a breakpoint

1 Answers1