user3067088 user3067088 - 6 months ago 13
CSS Question

CSS: set width equal to content

I'm experiencing some troubles with the width property of CSS. I have some paragraphs inside a div. I'd like to set 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. What I am supposed to do?
Thank you.

HTML:

<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>Sample Text 3</p>
</div>


CSS:

#container {
width: 30%;
background-color: grey;
}
#container p{
background-color: green;
}

Answer

Hi p tags are for default block elements that means he take the 100% of the parent width.

You can change your display property :

#container p {
   display:inline-block;
}

But it makes element side by side to keep each element in one line you can use :

#container p {
   clear:both;
   float:left;
}

If you use float need to clear after floated elements see in this link different techniques http://css-tricks.com/all-about-floats/

The demo http://jsfiddle.net/CvJ3W/5/

Edit

If you go for the solution with display:inline-block and want to keep each item in one line also can add <br> tag at the end of 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/