<sideBySide>

<sideBySide> is a Sectional component that takes enclosed sectional components and renders them in a side-by-side horizontal format.

Attributes and Properties

Example: Default <sideBySide>

<sideBySide> 
  <ul>
    <li>red</li>
    <li>orange</li>
    <li>yellow</li>
  </ul>
  <p><lorem generateWords="10"/></p>
</sideBySide>
<hr/>
 
<sideBySide> 
  <p><lorem generateWords="50"/></p>
  <p><lorem generateWords="100"/></p>
</sideBySide>
<hr/>
 
<sideBySide> 
  <graph/>
  <graph/>
  <graph/>
</sideBySide>

Three examples of different components placed in a <sideBySide> are illustrated. By default, portions are assigned an equal percentage width, with no margin. These settings can be modified with the widths and margins attributes.

Attribute Example: widths

<sideBySide widths="20% 80%">
  <graph/>
  <graph/>
</sideBySide>

The widths attribute assigns a width to each side-by-side portion by percent.

Attribute Example: margins

<sideBySide widths="20% 40% 40%" margins="2%">
  <graph/>
  <graph/>
  <graph/>
</sideBySide>      

The margins attribute assigns a margin between each side-by-side portion by percent. When widths and margins attributes are both applied, margins are applied first.