Purpose

This article describes the method used to achieve the column structure described in the title. By default, the fullwidth section column width vary according to the screen width. It is impossible to have any of the columns align with the page grid.

The method here is to add an inner section to the right column to house the elements of the right column. Set the width of the inner section to the required content width. Then calculate the column width of the outer column such that when the inner section is pushed to the start (justify-item: flex-start), the inner section can align with the right side of the grid.  The calculation is simplified when the left and right column have equal width as described below.

Approach

• By default, a column (both section and inner section), provides a padding of 10px on the 4 sides. To avoid too many paddings when using inner section, it is recommended to set the inner section column to zero paddings.
• Configure the section to have this structure:
  • section ( fullwidth, no gap, overflow hidden )
    • left column C1 (width: blank (or 50%), horizontal-align: default, css-id: cu-sandbox-r01c1 )
      • various elements
    • right column C2 ( width: blank (or 50%), horizontal-align: Start, css-id: cu-sandbox-r01c2 )
      • inner section ( content-width: boxed )
        • inner column ( width: 100% )
          • various elements

1. Assume the followings:
   • ELW = widest element in C2
   • IPL = inner section column padding left (default = 10px)
   • IPR = inner section column padding right (default = 10px)
   • SPL = section column padding left (default = 10px)
   • RCW = required content width = SPL + IPL + ELW + IPR
   • GRD = grid size of the page
   • LEN = the length between screen edge and the grid
2. If C1 and C2 have equal width, then set their width to 50% in Elementor. Skip the calculation in Steps 3 to 5.
3. It is obvious that 100vw = GRD + 2LEN, hence LEN = 50vw – GRD/2
4. Therefore, to have the elements in C2 in grid, the width of C2 = LEN + RCW
   • C2 = 50vw – GRD/2 + SPL + IPL + ELW + IPR
   • C1 = 100vw – C2
5. Set the width of left and right columns to C1 and C2 respectively in style.css or custom CSS.
6. Set inner section width (note: not column) to ( RCW-SPL ) in style.css or custom CSS.

Sample CSS

/** Left col in grid and right col fullwidth  **/
#cu-sandbox-r01c1 {
	width: calc(50vw - 128px);
}

#cu-sandbox-r01c2 {
	width: calc(50vw + 128px);
}

#cu-sandbox-r01c2 .elementor-inner-section {
	max-width: 718px;
}