Creating 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: 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.