Auto resize width of floating DIV to fit contain using CSS

Last Reply one year ago By kalpesh

Posted one year ago

How to make the width of my div shown in the code auto based on the content? right now the div border is 100% ...i want the div border to be only around the text

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div style="color:gray;font-size:11px;border:1px solid lightgray;border-right:1px solid lightgray;border-left:1px solid lightgray;padding:5px;"><h4>fghfgh(12:01:49 PM)</h4>
    sdfsdf</div>
</body>
</html>
You are viewing reply posted by: kalpesh one year ago.
Posted one year ago Modified on one year ago

Just change the display property as display: table; to work fine when using float property. Try by this and implement as per your logic.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div style="color: black; float: right; clear: right; margin-right: 10px; margin-top: 5px;
        margin-bottom: 5px; font-size: 20px; font-family: calibri; background-color: white;
        border: 1px solid lightgray; padding: 5px; border-radius: 5px; 
        word-wrap: break-word; display: table;">
        <p style="font-weight: bold; padding: 0; margin: 0">
            ann
        </p>
        Hi test message to check the chat messages </div>
    <div style="color: black; clear: right; margin-left: 10px; margin-top: 5px; margin-bottom: 5px;
        font-size: 20px; font-family: calibri; background-color: white; border: 1px solid lightgray;
        padding: 5px; border-radius: 5px;   word-wrap: break-word; display: table;">
        <p style="font-weight: bold; padding: 0; margin: 0">
            Anvina
        </p>
        hi recieved message to check the chat messages </div>
</body>
</html>

Demo