Implementing a Responsive Three-Column Layout with Flexbox
/* Global Reset and Typography */
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #eef2f5;
color: #333;
line-height: 1.6;
}
/* Layout Wrapper */
.page-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
/* Header Styling */
.page-header {
background: #2c3e50;
color: #ecf0f1;
padding: 2rem;
text-align: center;
border-bottom: 4px solid #3498db;
margin-bottom: 20px;
}
/* Flex Container for Main Content */
.content-row {
display: flex;
gap: 20px;
align-items: flex-start;
}
/* Shared Column Styles */
.col {
padding: 20px;
border: 1px solid #dcdcdc;
border-radius: 4px;
background: #fafafa;
}
/* Sidebar Specifics */
.sidebar-left {
flex: 0 0 250px; /* Fixed width */
background-color: #fdfefe;
}
.sidebar-right {
flex: 0 0 250px; /* Fixed width */
background-color: #fdfefe;
}
/* Main Content Area */
.primary-content {
flex-grow: 1; /* Occupies remaining space */
min-width: 0; /* Prevents flex overflow issues */
}
/* Footer Styling */
.page-footer {
margin-top: 30px;
padding: 20px;
background: #2c3e50;
color: #bdc3c7;
text-align: center;
font-size: 0.9em;
}
/* Responsive Breakpoints */
@media screen and (max-width: 992px) {
.content-row {
flex-wrap: wrap;
}
.sidebar-left, .sidebar-right {
flex: 0 0 200px;
}
}
@media screen and (max-width: 768px) {
.content-row {
flex-direction: column;
}
.sidebar-left, .sidebar-right, .primary-content {
width: 100%;
flex: auto;
margin-bottom: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="page-wrapper">
<header class="page-header">
<h1>Web Portal Layout</h1>
</header>
<div class="content-row">
<aside class="col sidebar-left">
<h3>Navigation</h3>
<p>Links and categories are placed here on the left side.</p>
</aside>
<main class="col primary-content">
<h2>Core Content</h2>
<p>This section adapts to fill the available space between the sidebars. Flexbox ensures alignment while fluid width handles browser resizing.</p>
</main>
<aside class="col sidebar-right">
<h3>Extras</h3>
<p>Advertisements or related widgets appear in this right-hand column.</p>
</aside>
</div>
<footer class="page-footer">
© 2023 Tech Layout Demo. All rights reserved.
</footer>
</div>
</body>
</html>The <div> element serves as a generic block-level container for grouping content. It does not inherently convey semantic meaning, making it ideal for structural styling. When applying CSS, developers can target these containers using classes to apply layouts like Flexbox or Grid. Unlike <span>, which is an inline element, the <div> forces a line break before and after its content, allowing it to define distinct sections within the document flow.
