---
id: howto-css-equal-height
title: "How To - Equal Height"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["equal height columns CSS", "display table-cell columns"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "layout", "flexbox"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_equal_height.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Equal Height]]

## 🎯 한 줄 통찰 (One-line insight)
The `display: table` / `display: table-cell` trick repurposes HTML TABLE layout behavior (where cells in the same row always match the row's tallest cell) onto plain `<div>`s WITHOUT using an actual `<table>` element — an old technique that pre-dates Flexbox, and the recipe explicitly shows Flexbox (`display: flex; flex: 1;`) as the modern equivalent with an explicit caveat: Flexbox isn't supported in IE10 and earlier, which is presumably why the table-display trick is taught FIRST despite being the more obscure approach. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`display: table` / `display: table-cell`** — makes a `<div>` container and its `<div>` children behave like a `<table>` and `<td>`s, inheriting the automatic row-height-matching behavior of real tables, without any table markup. [S1]
- **Responsive stacking via media query** — `@media (max-width: 600px) { .col { display: block; width: 100%; } }` switches the table-cell columns to stacked blocks on narrow screens. [S1]
- **Flexbox alternative** — `.col-container { display: flex; } .col { flex: 1; }` achieves the same equal-height effect with less code, but is unsupported in IE10 and earlier. [S1]

## 📖 세부 내용 (Details)
- Table-display method: `.col-container { display: table; width: 100%; } .col { display: table-cell; }`. [S1]
- Flexbox method: `.col-container { display: flex; width: 100%; } .col { flex: 1; padding: 16px; }`. [S1]

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

## 🛠️ 적용 사례 (Applied in summary)
서로 다른 텍스트 길이를 가진 3개 컬럼이 항상 가장 높은 컬럼에 맞춰 동일한 높이로 렌더링되는 예제가 원문에서 직접 제시됨. [S1]

## 💻 코드 패턴 (Code patterns)
Table-display trick vs. Flexbox for equal-height columns (CSS):
```css
/* Table-display trick -- works in older browsers */
.col-container { display: table; width: 100%; }
.col { display: table-cell; }

/* Flexbox -- modern, not supported in IE10 and earlier */
.col-container-flex { display: flex; width: 100%; }
.col-flex { flex: 1; padding: 16px; }
```

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

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

## 📚 출처 (Sources)
- [S1] W3Schools — How To - Equal Height — https://www.w3schools.com/howto/howto_css_equal_height.asp

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