[CSS] Comparison Between 100% Width and 50% Width | How to Use w-100
This guide compares width: 100%; and width: 50%;, and explains when each is useful.
🔹 Partial Code
<div class="w-100">
Element set to 100% width.
</div>
<style>
.w-100 {
width: 100%;
}
</style>
💻 Fully Functional Code (Just Copy and Run in HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>100% vs 50% Width Comparison</title>
<style>
.w-100 {
width: 100%;
background-color: #90EE90;
padding: 1rem;
}
.w-50 {
width: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="w-100">Element with 100% width.</div>
<div class="w-50">Element with 50% width.</div>
</body>
</html>
🧩 Applications and Use Cases
width: 100%; is a fundamental method to make elements scale based on their parent width. It's ideal for responsive designs and adjusts according to screen size.
On the other hand, width: 50%; sets an element to half of its parent's width, which is useful for side-by-side layouts.
📚 Practical Usage of the width Property
The CSS width property controls an element's horizontal size. Using percentages (%) or pixels (px) produces very different behaviors. % refers to the parent element's width, while px is absolute.
🔍 Benefits of % in Responsive Design
width: 100%; is especially valuable in responsive design. It adapts to the parent (often the viewport), making it suitable for various devices. A common strategy is to use width: 100% by default, and adjust with media queries.
📊 Two-Column Layouts
width: 50%; is handy for creating two-column layouts. However, without using display: inline-block, float, or Flexbox/Grid, the elements will stack vertically. With Flexbox, use display: flex; flex-wrap: wrap; on the parent to align children side by side.
Note: % width does not include padding or borders by default. To make calculations easier, consider using box-sizing: border-box, which includes padding and borders in the element's width.