Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set div width to fit content using CSS?
To set div width to fit content using CSS is an important task for creating responsive designs and optimal space usage. By default, div elements take the full available width, but we can make them shrink to fit their content.
Syntax
div {
width: max-content; /* or fit-content */
}
/* Alternative approach */
div {
display: inline-block;
}
Method 1: Using max-content Width Property
The max-content value sets the width to the maximum intrinsic width of the content, allowing the div to expand to accommodate its content without wrapping
<!DOCTYPE html>
<html>
<head>
<style>
.max-content-div {
background-color: lightblue;
padding: 15px;
width: max-content;
margin: 10px 0;
border: 2px solid darkblue;
}
</style>
</head>
<body>
<h3>max-content Example</h3>
<div class="max-content-div">
<p>This div adjusts its width to fit this content exactly using max-content.</p>
</div>
</body>
</html>
A light blue div with dark blue border appears, with width exactly matching the content inside. The div shrinks to fit the paragraph text without taking full container width.
Method 2: Using fit-content Width Property
The fit-content value behaves similarly to max-content but with better browser support and more predictable behavior
<!DOCTYPE html>
<html>
<head>
<style>
.fit-content-div {
background-color: lightgreen;
padding: 15px;
width: fit-content;
margin: 10px 0;
border: 2px solid darkgreen;
}
</style>
</head>
<body>
<h3>fit-content Example</h3>
<div class="fit-content-div">
<p>This div uses fit-content to size itself according to content.</p>
</div>
</body>
</html>
A light green div with dark green border appears, automatically sizing to fit its content. The div width adjusts dynamically to the paragraph text length.
Method 3: Using inline-block Display Property
Setting display: inline-block makes the div behave like an inline element that only takes the space it needs
<!DOCTYPE html>
<html>
<head>
<style>
.inline-block-div {
background-color: lightyellow;
padding: 15px;
display: inline-block;
margin: 10px 0;
border: 2px solid orange;
}
</style>
</head>
<body>
<h3>inline-block Example</h3>
<div class="inline-block-div">
<p>This div uses inline-block to fit its content width.</p>
</div>
</body>
</html>
A light yellow div with orange border appears, sized to fit its content. The div behaves as an inline-block element, taking only the necessary space.
Browser Support Comparison
| Method | Modern Browsers | Legacy Support | Best Use Case |
|---|---|---|---|
max-content |
Excellent | Limited | Modern layouts |
fit-content |
Excellent | Good | Responsive designs |
inline-block |
Excellent | Excellent | Legacy compatibility |
Conclusion
All three methods effectively make divs fit their content width. Use fit-content for modern responsive designs, inline-block for maximum browser compatibility, and max-content when you need precise intrinsic sizing.
52K+ Views
