Creating Column Layouts

Use the vdl-column tag to create multi-column layouts.

<vdl-column> elements accept a size attribute which determines the width of the column, expressed in units of 1/12 ^th of the page width. The code shows a section containing three child columns.

<vdl version="4.1">
  <vdl-page>
    <vdl-section>
      <vdl-column size="3">The left-hand column occupies one quarter of the page width.</vdl-column>
      <vdl-column size="6">The Center column occupies one half of the page width.</vdl-column>
      <vdl-column size="3">The right-hand column occupies one quarter of the page width</vdl-column>
    </vdl-section>
  </vdl-page>
</vdl>

This markup renders as follows:

Rendering vdl-column

Column resizing behavior depends on whether its parent section has a fluid or fixed layout:

• In a fluid section, columns will resize as the browser window resizes, so that a column of size 3 always occupies one quarter of the browser width.
• In a fixed section, the column widths remain the same when the browser window is resized.

Note If the total width of all columns adds up to more than 12, the surplus columns will wrap onto the next row and may not display correctly.

If a column does not specify a size or width it is given a size of 12 if it is the only column in a row, otherwise, it will be made just big enough to hold the widest contained element. Such columns are known as implicitly sized columns.

© 2001-2019 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.