Rows and Columns
MediaWiki skins built with a CSS Framework provide many useful features, including columns.
For the mh370wiki.net website I used the Pivot Skin which is "built on Zurb's Foundation Framework (v5.5.3), a "mobile first" and advanced responsive front-end framework." This includes a structure of twelve columns which can be grouped and/or offset to position content on-screen, with horizontal separation defined by rows. It is also referred to as a Grid.
In reality, I never needed more than three columns, and an offset can be simply defined using the css margin. I favoured the Vector skin with the collapsible menus provided by the extension CollapsibleVector. Which meant I had to define my own css styles for rows and columns.
The css below is what I use on the mh370wiki.net website. I have imported the same styles to MediaWiki:Common.css in this site also.
/* Rows and Columns */
/* 26 July 2020 New row/column layout */
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; }
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }
/* flex-basis determines column width */
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} /* use with col-width-60 */
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */
.col-width-30 { flex-basis: 0; }
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */
On the www.mh370wiki.net website I have used the Help Namespace for an online manual. I frequently refer to this manual because I have sample 'usage' code which I use to ensure what I write or format is consistent. My own guidelines to myself for using the above row and column layout is replicated below. Note that the styles have been added to MediaWiki:Custom.css to enable the examples to be correctly formated.
Code Snippets - Rows and Columns
Rows and Columns were introduced when using the Pivot skin and styles were derived from Foundation CSS. If any of the old code still exists it will be handed by some 'legacy' classes as shown below.
The site was upgraded and the Vector skin for MediaWiki was used instead of Pivot. This has two advantages: the skin is integral to MediaWiki so is not dependent on external authors maintaining it; and the recent versions are compatible with a Collapsible Menu.
The disadvantage of the change to Vector was that custom css for columns and rows had to be developed. The styles implemented and refined since July 2020 are shown below.
The most common implementation is a two-column layout, suitable for both wide-screen and mobile devices.
A three-column layout is also defined but may not display correctly on mobile devices.
Four (or more) columns are probably best defined using tables or margins. The examples below show several two and three column layouts.
Two-column Layout - equal width
Left Column
<div class="row"> <div class="column-left col-width-50"> </div> <!-- end column left --> <div class="column-right col-width-50"> </div> <!-- end column right --> </div> <!-- end row -->
Right Column
Note the space between column-left and column-right.
column-left style includes padding-right
column-left style includes padding-left
Column width uses flex. Resize the screen or window to see how the columns re-size.
Two-column Layout - 60/40
A common layout is 60% left and 40% right, as shown below.
Left Column
<div class="row"> <div class="column-left col-width-60"> </div> <!-- end column left --> <div class="column-right col-width-40"> </div> <!-- end column right --> </div> <!-- end row -->
Right Column
Each row is a container for the columns.
Note the use of comments to indicate the /div ending each column or row.
Two-column Layout - 75/25
A common layout is 75% left and 25% right, as shown below.
Left Column
<div class="row"> <div class="column-left col-width-75"> </div> <!-- end column left --> <div class="column-right col-width-25"> </div> <!-- end column right --> </div> <!-- end row -->
Right Column
The example code is contained within html pre tags, which automatically provides the grey background.
Three-column Layout - equal widths
Left Column
<div class="row"> <div class="column-left col-width-30"> </div> <!-- end left column --> <div class="column-center col-width-30"> </div> <!-- end column center --> <div class="column-right col-width-30"> </div> <!-- end column right --> </div> <!-- end row -->
Center Column
Note the American spelling of center, consistent with other css definitions.
Right Column
Three-column Layout - center widest
Left Column
Center Column
<div class="row"> <div class="column-left col-width-25"> </div> <!-- end left column --> <div class="column-center col-width-50"> </div> <!-- end column center --> <div class="column-right col-width-25"> </div> <!-- end column right --> </div> <!-- end row -->
Right Column
How does it work?
Short answer - I've forgotten. I created this code in 2020. Although there are in-line comments, there are three options for col-width-30, two of which are commented out. In the past I must have experimented with the different options and kept the one that "worked", but also kept the two commented ones so I had a record of what I had tried. If you use this example, just edit it until it does what you want.
More helpful answer - the W3 Schools website has a good explanation of the CSS Flexbox which is a layout method for arranging items in rows or columns.
See https://www.w3schools.com/csS/css3_flexbox.asp
See also What is CSS Flex-Basis? https://codelucky.com/css-flex-basis/
Workbooks and Records
I keep workbooks for each website, like a diary, and document things as I go. Before implementing the row and column styles shown above, I developed a 'conversion' which defined new styles for each of the columns in the Foundation Grid so I could change to the Vector skin and the site content would still format correctly. All new row and column layouts used the new classes, and eventually all the old ones got updated. My workbook notes "includes a limit on the width of all images - which seemed to expand outside of their flex container". Changing skins can present problems, and reliance on any particular CSS Framework can inhibit your own development and site flexibility.
Which is part of the point of this website: to encourage developers to comment their work; create and keep examples; write a style manual, or a how-to manual; document work in progress.