Background Height is also used to vertically align columns that sit adjacently to each other within a row, particularly when the column 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 columns sitting in a row:
- The Left Column has 400 characters of text and a yellow background
- The Centre Column has 200 characters of text and a blue background
- The Right Column 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 column
- It makes the backgrounds of the 3 column align neatly across the bottom, essentially stretching both the Centre Column and the Right Column 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 columns (e.g. 2 columns, 3 columns etc).
When in 'Design' 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 if your column heights are not vertically aligning, ensure that the two innermost frames have the identical settings.
The two inner frames should look something like this:
- Alignment: Both inner frames for all columns should have 'Background Height' set to 'Full'.
- Padding: Both inner frames will have either the 'Container' set to 'On', or the 'Padding' set to 'Wrap'.
- Border: The second inner frame is often used for the border. This should have consistent Border settings across all frames.