Block Layouts and Widths in Drupal 7

Drupal Version
Tags

If you have access to manage blocks on your Drupal site, the following tips and tricks may help you achieve better positioning of your blocks.

Automatic Re-Sizing and Regions

Blocks that are placed within the main content regions of a horizontal, vertical or multipurpose page (only available if you have installed the custom Georgia Tech Content Types package) will automatically resize, based on number of blocks in that region. Regions whose blocks behave this way include:

  • Area ABOVE Main Content (IGNORES sidebar regions)
  • Area ABOVE Main Content (RESPECTS sidebar regions)
  • Main Content
  • Area BELOW Main Content (RESPECTS sidebar regions)
  • Area BELOW Main Content (IGNORES sidebar regions)

Choose your Width

There are also block layout options that you can use to change a block's default width. You'll find these in the Layout drop-down list when you are creating or updating a Block:

  • Full width
  • Three quarter width
  • Two thirds width
  • Half width
  • One third width
  • One quarter width

For instance, you could have four blocks that sit side-by-side, but then apply the "Full width" layout option to the fifth block so that it extends the full width of the region, rather than sitting there like a misplaced element.

Remember: these widths apply to a block WHEREVER it is shown. So, if you need the same content to display differently on different pages, you may need to create a separate block for each look.

Screen Size and Number of Horizontal Blocks

Blocks will have different limits on number shown per row, based on the screen size of the device used to view your site.

  • For a desktop computer view of your site: regions are limited to four blocks next to each other (horizontally), after which additional blocks will break and start a new row.
  • On smaller screen sizes (such as tablets): blocks will stack two or three horizontally.
  • On the smallest viewports (such as smartphones): blocks will stack on top of each other (vertically), instead of next to each other (horizontally).

Clear Floats to Prevent Collisions

There is also a "Clear floats" checkbox available, useful for preventing block collisions due to varying content heights within each block.

An example problem might be a block in a lower row colliding with a block in the row above it, due to the content of the block in the upper row causing it to sit higher than its adjacent blocks. Just apply the clear floats option to the lower block and it will no longer collide with the block above.