Background Height is also used to vertically align horizontally blocks that sit adjacently to each other within a row, particularly when the blocks have varying amounts of content within them. To achieve this it is important to:
- Set the two most inner frames to Background Height Full.
- Know that, if you set the Frame Height (e.g. to 500px), this will override the background height.
- Though, there is no harm in using background height if you are using Frame Height.
Let's say you have a 3 horizontal blocks sitting in a row:
- The Left Block has 400 characters of text and a yellow background
- The Centre Block has 200 characters of text and a blue background
- The Right Block has 300 characters of text and a green background
Background Height is used to to do two things:
- It makes the background colours to be full height for each Block
- It makes the backgrounds of the 3 blocks align neatly across the bottom, essentially stretching both the Centre Block and the Right Block to be the same height as the taller Left Block (the Left Block is taller as it has more content).
MOBLE CMS comes with many pre-formatted layouts. There are many layouts with aligning blocks (e.g. 2 columns, 3 columns etc).
When in 'Advanced' mode, in most scenarios, you will notice that the two inner-most frames have 'Background Height' set to 'Full'. This ensures both the height of the background and the height of the border are aligned perfectly. If you notice that your Blocks are not aligning, ensure that the two innermost frames have the identical settings.
The two inner frames should look something like this:
- Block Alignment: Both inner frames for all blocks should have 'Background Height' set to 'Full'.
- Block Padding: Both inner frames will have either the 'Container' set to 'On', or the 'Padding' set to 'Wrap'.
- Block Border: The second inner frame is often used for the border. This should have 'Container' set to 'On', with consistent 'Border' preferences across all blocks.