Left Half And Right Half Layout – Many Different Ways

Quite a few years ago we did posted about this idea here for CSS tricks. We thought it was time to update this and do the theme justice.

Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically, two columns of the same height are required within a container. Each side takes up exactly half of the container, creating a clear separation between each side. As with many things in CSS, there are a number of possibilities here, and we’ll go through many of them in a moment!

Update (October 25, 2024): Added an example that uses CSS anchor positioning.

Using background gradient

An easy way to create the illusion of a changing background is to use gradients. Half of the background is set to one color and the other half is set to another color. Instead of transitioning from one color to another, a null space color stop is placed in the middle.

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

This works with a single container element. However, this also means that working with floats or perhaps another layout method is necessary if the content needs to fill both sides of the container.

Using absolute positioning

Another option could be to set up two containers within a parent container, position them absolutely, split them in half using percentages, and then apply the backgrounds. The advantage here is that we now have two separate containers that can hold their own content.

Absolute positioning is sometimes a perfect solution and sometimes untenable. The parent container here needs to have a set height, and setting heights is often bad news for content (content changes!). Not to mention that absolutely positioned elements are outside the document flow. Therefore, it would be difficult to get this to work while, for example, other content underneath is pushed down.

Use of (fake) tables

Yes, yes, tables are so old-fashioned (not to mention fraught with accessibility issues and lack of layout flexibility). Well, with that display: table-cell; The property can actually be a handy way to create this layout without having to write table markup in HTML. In short, we turn our semantic parent container into a table and then the child containers into cells within the table – all in CSS!

You can even easily change the display properties at breakpoints here so that pages are stacked on smaller screens. display: table; (and friends) is already supported from IE 8 and even old Android, so it’s pretty safe!

Use floats

We can use our good friend float to arrange the containers next to each other. The advantage is that it avoids absolute positioning (which, as mentioned, can be chaotic).

In this example, we explicitly set the heights to make them uniform. But with floats you don’t really get that ability by default. You could use the background gradient trick we already covered to make them easy see even. Or look at it Fancy tricks with negative margins and the like.

Also remember that you may have to do this Clear the swimmers on the parent to keep the document flow smooth.

Using inline block

If deleting elements after floats seems like a burden, then using display: inline-block is another option. The trick here is to make sure there are no breaks or spaces between elements for each page in the HTML. Otherwise, this space will be rendered as a literal space and the second half will break and fall.

Again, there’s nothing about the inline block that helps us balance the heights of the pages, so you have to say that explicitly.

There are also other possible ways to solve the spacing problem described above.

Using Flexbox

Flexbox is a pretty fantastic way to do this. However, note that it is limited to IE 10 and above and you may need to do this Do something special with the prefixes and values to get the best support.

Using this method, we turn our parent container into a flexible box, with the child containers occupying an equal share of space. No widths or heights need to be specified! Flexbox just knows what to do because the default settings are set up perfectly for it. For example, flex-direction: row; And align-items: stretch; is what we’re looking for, but these are the default settings so we don’t need to set them. To ensure they are even, set them firmly flex: 1; there is a good plan on the sides. This forces them to occupy equal amounts of space.

In this demo, for fun, we also make the side flex containers to allow for vertical and horizontal centering.

Using grid layout

For those who are up to date, the CSS grid layout The technique is similar to combining the Flexbox and Table methods. In other words, a container is defined, which is then divided into columns and cells that can be flexibly filled with child elements.

CSS anchor positioning

Rollout began in 2024 and we are still waiting for full browser support. But we can use it CSS anchor positioning to “append” one element to another – even if these two elements are completely independent of each other in the markup.

The idea is that we have an element that is registered as an “anchor” and another element that is the “target” of that anchor. It is as if the target element is attached to the anchor. And we have control over where we pin it!

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
}

This will set one up .anchor and establishes a relationship with a .target Element. From here we can tell the target which side of the anchor to attach to.

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
  left: anchor(right);
}

Isn’t it cool how many ways there are to do things in CSS?