How would you create a responsive two-column layout without using floats
•17 min read
Here’s a complete step-by-step explanation — with working code — on how to create a responsive two-column layout without using floats 👇
🧩 What’s the Goal?
We want two columns that:
- Sit side-by-side on large screens.
- Stack vertically on smaller screens (mobile).
- Do this without using floats, using Flexbox or CSS Grid instead.
✅ Method 1: Using Flexbox
💻 HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Two-Column Layout</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* Allows wrapping for small screens */
gap: 20px;
}
.column {
flex: 1; /* Equal width columns */
min-width: 300px; /* Ensures columns wrap on small screens */
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
}
@media (max-width: 600px) {
.container {
flex-direction: column; /* Stack columns vertically on small screens */
}
}
</style>
</head>
<body>
<div class="container">
<div class="column">Column 1 Content</div>
<div class="column">Column 2 Content</div>
</div>
</body>
</html>
✅ Method 2: Using CSS Grid
💻 HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two equal columns */
gap: 20px;
padding: 20px;
}
.grid-item {
background-color: #e3e3e3;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr; /* One column on small screens */
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Column 1</div>
<div class="grid-item">Column 2</div>
</div>
</body>
</html>
🧠 Explanation
- Flexbox: Automatically arranges columns side by side and wraps them when the screen shrinks.
- CSS Grid: Defines a fixed number of columns and can easily adjust via media queries.
- Both are responsive, modern, and don’t need floats or clearfix hacks.
