Basic Example
Here’s a complete HTML file with CSS that shows various ways to place containers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS Container Placement</title>
<style>
/* Basic reset and body styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f7fa;
padding: 20px;
}
/* Container styles */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 30px;
text-align: center;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
h2 {
font-size: 1.8rem;
margin: 25px 0 15px;
color: #2c3e50;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
p {
margin-bottom: 20px;
font-size: 1.1rem;
}
.example-box {
background-color: white;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* Flexbox example */
.flex-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.flex-box {
flex: 1;
min-width: 250px;
background-color: #e8f4fc;
padding: 20px;
border-radius: 8px;
text-align: center;
}
/* Grid example */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.grid-box {
background-color: #fce8f8;
padding: 20px;
border-radius: 8px;
text-align: center;
}
/* Floating elements */
.float-container {
overflow: hidden; /* Clearfix */
}
.float-box {
width: 48%;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.left {
float: left;
background-color: #e8fce9;
}
.right {
float: right;
background-color: #fcf4e8;
}
/* Clear floats */
.clear {
clear: both;
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #7f8c8d;
font-size: 0.9rem;
}
.code {
background-color: #2d3e50;
color: #fff;
padding: 15px;
border-radius: 5px;
font-family: monospace;
overflow-x: auto;
margin: 15px 0;
font-size: 0.95rem;
}
.highlight {
background-color: #fff8e1;
padding: 3px 5px;
border-radius: 3px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>HTML & CSS Container Placement</h1>
<p>Learn how to position containers on a web page</p>
</header>
<div class="example-box">
<h2>1. Basic Container with Max-Width</h2>
<p>This container uses <span class="highlight">max-width</span> and <span class="highlight">margin: auto</span> to center itself on the page while limiting its width.</p>
<div class="code">
.container {<br>
max-width: 1200px;<br>
margin: 0 auto;<br>
padding: 20px;<br>
}
</div>
</div>
<div class="example-box">
<h2>2. Flexbox Layout</h2>
<p>Flexbox makes it easy to create flexible and responsive container layouts. These boxes will wrap on smaller screens.</p>
<div class="flex-container">
<div class="flex-box">
<h3>Flex Item 1</h3>
<p>This is a flex container child</p>
</div>
<div class="flex-box">
<h3>Flex Item 2</h3>
<p>This is another flex container child</p>
</div>
<div class="flex-box">
<h3>Flex Item 3</h3>
<p>This is a third flex container child</p>
</div>
</div>
<div class="code">
.flex-container {<br>
display: flex;<br>
gap: 20px;<br>
flex-wrap: wrap;<br>
}<br><br>
.flex-box {<br>
flex: 1;<br>
min-width: 250px;<br>
}
</div>
</div>
<div class="example-box">
<h2>3. CSS Grid Layout</h2>
<p>CSS Grid provides a two-dimensional layout system. This grid automatically adjusts the number of columns based on screen width.</p>
<div class="grid-container">
<div class="grid-box">
<h3>Grid Item 1</h3>
<p>This is a grid container child</p>
</div>
<div class="grid-box">
<h3>Grid Item 2</h3>
<p>This is another grid container child</p>
</div>
<div class="grid-box">
<h3>Grid Item 3</h3>
<p>This is a third grid container child</p>
</div>
</div>
<div class="code">
.grid-container {<br>
display: grid;<br>
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));<br>
gap: 20px;<br>
}
</div>
</div>
<div class="example-box">
<h2>4. Float-Based Layout</h2>
<p>Before Flexbox and Grid, floats were the primary method for creating layouts. They're still useful in some cases.</p>
<div class="float-container">
<div class="float-box left">
<h3>Left Float</h3>
<p>This container is floated to the left</p>
</div>
<div class="float-box right">
<h3>Right Float</h3>
<p>This container is floated to the right</p>
</div>
</div>
<div class="clear"></div>
<div class="code">
.left {<br>
float: left;<br>
width: 48%;<br>
}<br><br>
.right {<br>
float: right;<br>
width: 48%;<br>
}<br><br>
.clear {<br>
clear: both;<br>
}
</div>
</div>
<footer>
<p>Created for HTML/CSS learning purposes | Try resizing your browser to see how these layouts respond!</p>
</footer>
</div>
</body>
</html>Key Concepts Explained
- Basic Container: The
.containerclass usesmax-widthandmargin: autoto create a centered container that doesn’t get too wide on large screens. - Flexbox: The
.flex-containeruses Flexbox to create a flexible layout that wraps on smaller screens. Theflex: 1property makes the boxes share available space equally. - CSS Grid: The
.grid-containeruses Grid to create a responsive layout that automatically adjusts the number of columns based on available space. - Floats: The float example shows the traditional approach to layout, though this is less common now with Flexbox and Grid available.
Next Steps
To continue learning:
- Experiment with the code – change colors, sizes, and layout properties
- Try adding more containers using each technique
- Research responsive design with media queries
- Practice by recreating layouts from websites you like
✍️ Need Content Like This?
We craft high-quality, SEO-optimized articles tailored for blogs, news sites, and educational platforms. If you enjoy thoughtful writing and open-source spirit, just buy me a coffee and I’ll write 1,000 words for you. Let’s build something meaningful together. Contact us to get started.
