Align your blocks in a row

The default behavior of the page templates (Flex and Internal) force the page to display blocks in a linear fashion from top to bottom. There is a way to create a row of content blocks and it only requires a small snippet of CSS to accomplish this layout. Copy and paste the code below into a stylesheet (new or existing) and then attach it to the Page settings region of the page where you want to change the layout to rows.

.left {
float: left;
clear: none !important;
margin: 0 1em 1em 0;
}

This applies to attaching multiple blocks in a single repeating content block (Internal page) or column region (Flex page):

Block attachment region where multiple blocks are attached with the intent of floating the blocks in a row

All blocks attached in the "Additional block content (optional)" area should have at least these settings:

  • display below section heading
  • content box alignment set to left
  • Width of block content may need to be adjusted to allow for the float

NOTE: Be aware that if the amount of information from block to block is different, it could cause wrapping issues which will display with the blocks suddenly aligning to the right. See the example below how each block has the same number of lines to avoid the wrapping problem.

Person 4

Icon of female casual

Graduate Researcher
Biological Sciences
person4@ucdavis.edu
(530) 752-0000

Person 1

Icon of male pharmacist

Pharmacist
Health Sciences
person1@ucdavis.edu
(530) 752-0000

Person 5

Icon of male business

Grant Writer
Office of Research
person4@ucdavis.edu
(530) 752-0000

Person 2

Icon of female business

Analyst
Shared Services Center
person2@ucdavis.edu
(530) 752-0000

Person 3

Icon of male customer service rep

Customer Service Rep
ServiceNow
person3@ucdavis.edu
(530) 752-0000

Person 6

Icon of female medical

Hospice Provider
School of Nursing
person4@ucdavis.edu
(530) 752-0000