Split screen website layout: two halves, one clear reading order
A split screen layout divides the viewport into two side-by-side halves. It suits two situations well: offering two equal choices, such as two audiences or two products, and pairing one strong image with the text that explains it. It needs two decisions to work: what the proportions say about importance, and which half comes first when the screen is too narrow for both.
Two jobs a split does well
Two equal choices
A school with sections for parents and for staff, a studio that sells both workshops and commissions, a venue for weddings and for conferences. A 50/50 split tells visitors that both paths matter equally and lets each pick theirs immediately. Each half needs its own heading, one sentence and one button. If one option is clearly primary, the equal split is misleading; use a lead block and a secondary link instead.
Image and explanation
The more common use: a photograph on one side, the headline, text and action on the other. This two column hero works because the image doesn't have to sit behind text, so it needs no dark overlay and text contrast is easy. It suits products, spaces and people, where the photo carries real information.
Choosing the proportions
| Ratio | Reads as | Use for |
|---|---|---|
| 50/50 | Two equals | Two audiences, two products, a before and after |
| 60/40 | Text leads, image supports | Hero sections where the message matters most |
| 40/60 | Image leads, text captions it | Portfolios, property, food, product launches |
| Two thirds, one third | Main content and a side panel | Articles with a summary box, a form beside its explanation |
Keep the text half wide enough for a comfortable line. A split layout website on a 1440px screen gives each half roughly 700px, which is fine; on a 1024px laptop a 40% text column may hold only five or six words per line at a large headline size. Set a maximum width on the text inside its half, around 60 to 70 characters for body copy, and let the image take the remaining space.
How it should stack on phones
Below roughly 860px the halves usually stop fitting side by side and stack. Decide the order deliberately:
- Text first for most heroes. The headline and button should appear without scrolling on a phone; an image that fills the first screen pushes them out of sight.
- Image first only when it is the message: a property listing, a dish, a piece of art. Then keep it short, for example a 16:10 crop instead of a tall portrait.
- Keep source order and visual order the same. If CSS reverses the halves on desktop with
orderorflex-direction: row-reverse, keyboard and screen reader users follow the HTML order, not the visual one. MDN's order reference warns about exactly this, and WCAG asks for a meaningful sequence. - For two equal choices, stack them as two clear blocks with a visible divide, not as one long column where the second option is easy to miss.
Common mistakes
- Full-height halves everywhere. Forcing each half to
100vhcrops images unpredictably and leaves short text floating in empty space. Size to content, with a sensible minimum height. - A split for every section. Alternating image-left, image-right sections for a whole page becomes a zigzag that's tiring to scan. Use the split two or three times, not ten.
- Mismatched heights. When one half is much taller, the other side has a large gap. Align the text half to the centre or top of the image deliberately, or let the shorter half stay in view while the longer one scrolls.
- Two buttons of equal weight in an image split. One action, one secondary link.
Split screen design in Anticode
Anticode's design engine uses split layouts in several places: the hero gives its headline about three fifths of the width with a side column beside it, and the story, FAQ, booking, contact and newsletter sections set their heading and text beside the content or form in two equal columns. On narrower screens, around 860px and below, they collapse to a single column with the content in its source order, so the reading order on a phone matches the HTML.
The layout editor lets you adjust a split by hand: select an element and drag its edge to resize it, and the size snaps to columns, so a 50/50 can become a 7-and-5 or 8-and-4 split on the grid. Its inspector also sets the gap, alignment, and whether one half stays in view while its neighbour scrolls, which applies only on screens wide enough to keep the halves side by side. Each element has a minimum width below which it takes the full width, so a split can't squeeze text into an unreadable strip. See asymmetrical web design layout for using unequal splits on purpose.
Questions people ask
When should I use a split screen layout?
For two equally important choices, or to pair a strong image with the text that explains it. Avoid it when one option clearly matters more.
Should the image go on the left or the right?
Either works. In left-to-right languages, text on the left is read first; put the image left when it carries the message.
What happens to a split layout on mobile?
It should stack into one column, with the order chosen on purpose: usually text first, so the headline and action appear without scrolling.
Sources
- order, MDN Web Docs, checked
- Understanding SC 1.3.2: Meaningful Sequence, W3C, checked