---
id: howto-css-two-columns
title: "How To - Two Column Layout"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["2 column grid CSS float flexbox"]
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", "flexbox", "responsive"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_two_columns.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Two Columns]]

## 🎯 한 줄 통찰 (One-line insight)
This is the only column-layout recipe in this cookbook batch to state an explicit DECISION RULE rather than just presenting Flexbox as strictly "the modern way" — it says "it is up to you if you want to use floats or flex... however, if you need support for IE10 and down, you should use float," turning what could be a simple old-vs-new dichotomy into a practical browser-support checklist for choosing between the two. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Float method (equal)** — `.column { float: left; width: 50%; }` + clearfix, same pattern as 3/4-column recipes. [S1]
- **Flexbox method (equal)** — `.row { display: flex; } .column { flex: 50%; }` — no clearfix needed since Flexbox doesn't remove children from flow the way floats do. [S1]
- **Explicit decision rule** — use float if IE10-or-earlier support is required; otherwise either method works. [S1]
- **Unequal columns (float only shown)** — `.left { width: 25%; } .right { width: 75%; }`. [S1]

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

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **명시적 선택 기준이 제시됨**: 다른 컬럼 레이아웃 레시피들과 달리, 이 챕터는 "IE10 이하 지원이 필요하면 float를 쓰라"는 구체적 선택 기준을 직접 명시한다는 점이 확인됨 — 단순히 "flex가 더 현대적"이라는 서술에 그치지 않음. [S1]

## 🛠️ 적용 사례 (Applied in summary)
동일한 2단 레이아웃을 float와 flexbox 두 가지 방식으로 각각 구현하고, 각 방식의 브라우저 지원 여부에 따른 선택 기준을 함께 제시하는 예제가 원문에서 직접 제공됨. [S1]

## 💻 코드 패턴 (Code patterns)
Float vs. Flexbox for two equal columns — pick based on IE10 support needs (CSS):
```css
/* Float -- use if IE10 and earlier must be supported */
.column-float { float: left; width: 50%; }
.row:after { content: ""; display: table; clear: both; }

/* Flexbox -- modern, no IE10 and earlier support */
.row-flex { display: flex; }
.column-flex { flex: 50%; }
```

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

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

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

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