Making a div wrap around the content

Question

I have a div but it fits to the borders of the container instead of wrapping around the text. I tried float:left but it will push it to the side and there's no way to make it go to the center. Help?

Code:

div.warning-stripe {
 padding:2px;
 border:1px solid #FFA11B;
 background-color: #FFC71B;
 vertical-align:middle;
 color:835600;
 margin-left:auto;
 margin-right:auto;
 text-align:center;

}

So you're saying that it's going to 100% of the container? Since text free-flows as wide as the container or screen, if you don't constrain the div, it's going to grow as wide or tall as its allowed. Could you give us the rest of the picture?
Check your color: tag too...it's missing the #, which would make that declaration invalid. — bpeterson76, Aug 20 '10 at 19:03

score 3 · Accepted Answer · answered Aug 20 '10 at 19:06

Based on what I see I'm guessing you're trying to get this DIV to center itself in another block level element and not have it expand to the entire width of the container. To do that you need to set a width for that DIV:

div.warning-stripe {
 padding:2px;
 border:1px solid #FFA11B;
 background-color: #FFC71B;
 vertical-align:middle;
 color:835600;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
 width: 300px; /* You need a width if you're going to use auto margins */
}

Making a div wrap around the content

1 Answers1