-1

I am trying to get two columns of text in my slide in isolides by:

<div style="float: left; width: 40%;">
1.    Threaded couplers (TC)
2.    Headed bar couplers (HBC)
3.    Bar-grip (swaged) couplers (BSC)
</div>

<div style="float: right; width: 60%;">
4.    Shear screw couplers (SSC)
5.    Grouted sleeve couplers (GSC)
</div>

But the results I get is:

enter image description here

Maral Dorri
  • 468
  • 5
  • 17
  • You're using two lists right? That is expected behaviour – Paulie_D Feb 16 '21 at 10:06
  • if you are using a list look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li and search for the li attribute `value` , but you should use a CSS counter to avoid dealing with the value attribute : see https://developer.mozilla.org/en-US/docs/Web/CSS/counter() . there is also CSS column to split a list into columns : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns – G-Cyrillus Feb 16 '21 at 10:10
  • @Paulie_D I only want one list. This the text in my slide and I just want to divide it up into two columns – Maral Dorri Feb 16 '21 at 10:13
  • 2
    so use https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns ;) – G-Cyrillus Feb 16 '21 at 10:13

1 Answers1

0

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns seems to be what you need:

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

example

ol {
  column-count: 2;
}
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

You can shrink it and set columns to max-width of an item:

ol {
  column-count: 2;
  width: max-content;
  column-gap: 2em;
  border: solid;
}

li {
  box-shadow: 0 0 0 1px;
}
<ol>
  <li>item longer</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129