Left Half and Right Half Layout - Many Different Ways

Years ago, CSS-Tricks explored various methods for creating a two-column layout. This updated article provides a comprehensive overview of these techniques.

Let's say you need a layout split into two equal-height columns within a container. Numerous CSS approaches achieve this, and we'll examine several.

Update (Oct. 25, 2024): This article now includes an example using CSS Anchor Positioning.

Background Gradient Technique

A simple visual approach uses background gradients. Define half the background with one color, and the other half with a different color. A zero-space color stop creates a sharp division:

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

This works with a single container, but requires floats or other layout methods if content needs to fill both sides.

Absolute Positioning Method

Alternatively, use two containers within a parent, position them absolutely, and divide the space using percentages. This allows independent content for each column. However, the parent requires a fixed height, which can be problematic with dynamic content. Absolute positioning also removes elements from the document flow, potentially affecting other content.

(Fake) Tables Approach

While tables are outdated for layout (and pose accessibility concerns), display: table-cell; offers a convenient solution. The parent container becomes a table, and child containers become cells, all handled in CSS. This method is easily adaptable to different screen sizes by changing display properties at breakpoints. It enjoys broad browser support, dating back to IE8.

Using Floats

Floats provide another option, avoiding the complications of absolute positioning. Explicit height settings ensure even column heights, although floats don't inherently provide this functionality. Background gradients or other techniques can create the illusion of equal height. Remember to clear floats on the parent to maintain proper document flow.

Inline-Block Method

display: inline-block; offers a cleaner alternative to floats, avoiding the need for clearing. However, ensure no spaces or line breaks exist between the HTML elements for the columns, to prevent unwanted spacing. Again, explicit height settings are necessary for equal column heights.

Flexbox Solution

Flexbox provides an elegant solution, though support is limited to IE10 and above. The parent container becomes a flexbox, and child containers automatically share space equally. Setting flex: 1; on the child containers ensures equal distribution. This method handles vertical and horizontal centering effectively.

Grid Layout

For advanced users, CSS Grid Layout combines the flexibility of Flexbox and the table approach. Define a container, then divide it into columns and cells that can be filled with child elements.

CSS Anchor Positioning (New!)

CSS Anchor Positioning, a newer feature (2024 ), allows linking unrelated elements. An "anchor" element is defined, and a "target" element is pinned to it. This offers precise control over positioning:

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

The abundance of CSS techniques highlights its versatility.

The above is the detailed content of Left Half and Right Half Layout - Many Different Ways. For more information, please follow other related articles on the PHP Chinese website!