Width equal to content
Question
I'm experiencing some trouble with the width property of CSS. I have some paragraphs inside a div. I'd like to make the width of the paragraphs equal to their content, so that their green background looks like a label for the text. What I get instead is that the paragraphs inherit the width of the div father node which is wider.
#container {
width: 30%;
background-color: grey;
}
#container p {
background-color: green;
}<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>Sample Text 3</p>
</div>Accepted Answer
By default p tags are block elements, which means they take 100% of the parent width.
You can change their display property with:
#container p {
display:inline-block;
}
But it puts the elements side by side.
To keep each element on its own line you can use:
#container p {
clear:both;
float:left;
}
(If you use float and need to clear after floated elements, see this link for different techniques: http://css-tricks.com/all-about-floats/)
Demo: http://jsfiddle.net/CvJ3W/5/
Edit
If you go for the solution with display:inline-block but want to keep each item in one line, you can just add a <br> tag after each one:
<div id="container">
<p>Sample Text 1</p><br/>
<p>Sample Text 2</p><br/>
<p>Sample Text 3</p><br/>
</div>
New demo: http://jsfiddle.net/CvJ3W/7/
Popular Answer
I set width as max-content and it worked for me.
width: max-content;
Read more... Read less...
The solution with inline-block forces you to insert <br> after each element.
The solution with float forces you to wrap all elements with "clearfix" div.
Another elegant solution is to use display: table for elements.
With this solution you don't need to insert line breaks manually (like with inline-block), you don't need a wrapper around your elements (like with floats) and you can center your element if you need.
Adding display: inline-block; to the p styling should take of it:
#container p{
background-color: green;
display: inline-block;
}
set width attribute as: width: fit-content
Set display:inline-block and then adjust your margins.
fiddle here: http://jsfiddle.net/Q2MrC/
You can use either of below :-
1) display : inline-block :
http://jsbin.com/feneni/edit?html,css,js,output
Uncomment the line
float:left;
clear:both
and you will find that parent container has collapsed.
2) Using display : table