Auto resize width of floating DIV to fit contain using CSS

Last Reply 11 months ago By kalpesh

Posted 11 months 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 11 months ago.
Posted 11 months ago Modified on 11 months 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