CODEWITHSUNDEEP
html
user304602
user304602

Reputation: 991

Resizing div width to automatically fit paragraph's width

I have a div and within it a paragraph:

<div id="MyDiv">
    <p style="color: #FF8000; font-size: 10pt; font-family: Verdana;">
        &ensp;&ensp;This is my first line in the paragraph. This line cannot be broken.<br />
        &ensp;&ensp;This is my second line in the paragraph. This line cannot be broken.<br /><br />
        This is another line within the paragraph. This line cannot be broken.<br />        
    </p>
</div>

As seen above, my paragraph has a lot of line. Each line ends with a new line. Some of the end with two new lines.

I would like div's width to be resized automatically to the longest paragraph line width. How can I do this?

Note: I do not want lines to be broken into separate lines until
is reached. Div's width must be resized to the longest line width.

Upvotes: 0

Views: 1620

Answers (3)

Koen.
Koen.

Reputation: 26949

Set the display of the div to inline-block and to prevent wrapping of lines add white-space: nowrap; for the paragraphs:

#MyDiv{
    display: inline-block;
}

#MyDiv p{
    white-space: nowrap;    
}

Fiddle here: http://jsfiddle.net/LMB6L/6/

Upvotes: 2

iWumbo
iWumbo

Reputation: 135

I would suggest width:auto; or inherit in the paragraph modification

Upvotes: 0

ravb79
ravb79

Reputation: 752

Is this what you mean?

#MyDiv {outline:1px solid red;display:inline-block;}

http://jsfiddle.net/62CQt/

Upvotes: 1

Related Questions