---
id: howto-css-four-columns
title: "How To - Four Column Layout"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["4 column grid CSS float"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.82
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "layout", "float", "responsive"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_four_columns.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Four Columns]]

## 🎯 한 줄 통찰 (One-line insight)
Four equal columns is just `width: 25%` (100% ÷ 4 columns) applied to `float: left` children — the SAME clearfix-plus-float pattern already seen in the About Page and Equal Height recipes, confirming that "N equal float columns" always reduces to `width: (100/N)%` plus a `::after` clearfix on the row, regardless of whether N is 2, 3, or 4. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`width: 25%` for 4 equal columns** — the float-width formula generalizes as `100% / N` for N equal columns. [S1]
- **`.row:after` clearfix** — required whenever floated columns are used, to prevent the row container from collapsing. [S1]
- **Single-breakpoint responsive collapse** — `@media (max-width: 600px) { .column { width: 100%; } }` stacks all four columns vertically below 600px, with no intermediate 2-column step (contrast with Mixed Column Layout, which adds an intermediate breakpoint). [S1]

## 📖 세부 내용 (Details)
- Base layout: `.column { float: left; width: 25%; } .row:after { content: ""; display: table; clear: both; }`. [S1]
- Responsive collapse: `@media screen and (max-width: 600px) { .column { width: 100%; } }`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.

## 🛠️ 적용 사례 (Applied in summary)
4개의 동일한 폭 컬럼을 만들고, 600px 미만 화면에서 전부 세로로 쌓이게 하는 예제가 원문에서 직접 제시됨. [S1]

## 💻 코드 패턴 (Code patterns)
Four equal float columns with a single responsive breakpoint (CSS):
```css
.column { float: left; width: 25%; }
.row:after { content: ""; display: table; clear: both; }

@media screen and (max-width: 600px) {
  .column { width: 100%; }
}
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
- **신뢰 점수:** 0.82
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3Schools HOW TO]]
- **관련 개념:** [[HOWTO CSS Mixed Columns]], [[HOWTO CSS Three Columns]], [[HOWTO CSS Two Columns]], [[HOWTO CSS Equal Height]]
- **참조 맥락:** CSS Layout & Positioning 섹션.

## 📚 출처 (Sources)
- [S1] W3Schools — How To - Four Column Layout — https://www.w3schools.com/howto/howto_css_four_columns.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Four Column Layout" recipe (Astra wiki-curation, P-Reinforce v3.1 format).