Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set DIV Width to Fit Content Using CSS
To set div width to fit content using CSS is an important task due to various reasons like making a responsive design and optimal use of space. In this article, we have used a p element to write content inside div element.
We are having div as parent element and content written in p is our child element. Our task is to set div width to fit content written in p element.
Approaches to Set div width to Fit Content using CSS
There are multiple ways to set div width to fit content using CSS, here is a list of approaches with step wise explaination and complete example codes.
Using max-content width Property
To set div width to fit content, we have used max-content value of width property. The max-content property sets width of a div element dynamically based on its content.
- We have set "width: max-content" property on div, which allows it to fit it's content width dynamically.
Example
In this example we have implemented the above mentioned approach toset div width to fit content.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2 {
text-align: center;
}
.max {
background-color: lightgray;
padding: 10px;
width: max-content;
}
</style>
</head>
<body>
<h2>max-content Example</h2>
<div class="max">
<p>The following example,uses max-contetnt
property to set div width to fit content
using CSS.</p>
</div>
</body>
</html>
Using fit-content width Property
In this approach, we have used another value of width property that is fit-content value which makes div to automatically adjust it's width according to it's content width. Changing the content inside the div element will also adjust the width of the element accordingly.
- We have set "width: max-content" property on div element so that it can change it's width according to it's content's width
Example
Here is the complete example code implementing the above property to set div width to fit it's content.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2 {
text-align: center;
}
.max {
background-color: lightgray;
padding: 10px;
width: fit-content;
}
</style>
</head>
<body>
<h2>fit-content Example</h2>
<div class="max">
<p>The following example,uses max-contetnt
property to set div width to fit content
using CSS.</p>
</div>
</body>
</html>
Using inline-block Property
In this approach we have used display property to make div behave like an inline element using inline-block. Inline element takes only the required space which will make div element adjust it's width according to space required by it's content.
- In this approach we have set "display: inline-block" on div element to make it to behave as inline element.
Example
Here is an example implementing above approach to set div width to fit it's content.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2 {
text-align: center;
}
.max {
background-color: lightgray;
padding: 10px;
display: inline-block;
}
</style>
</head>
<body>
<h2>inline-block Example</h2>
<div class="max">
<p>The following example,uses max-contetnt
property to set div width to fit content
using CSS.</p>
</div>
</body>
</html>
Conclusion
In this article we have understood how to set div width to fit content using CSS. We discussed three approaches to set div width to fit content using CSS such as max-content value, fit-content value, and inline-block property value. Among all the discussed approaches, 'fit-content' property is most convenient due to it's simplicity.
51K+ Views
