Auto resize width of floating DIV to fit contain using CSS

Question

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 textltDOCTYPE htmlgtlthtmlgtltheadgtltheadgtltbodygt    ltdiv style34colorgrayfontsize11pxborder1px solid lightgrayborderright1px solid lightgrayborderleft1px solid lightgraypadding5px34gtlth4gtfghfgh120149 PMlth4gt    sdfsdfltdivgtltbodygtlthtmlgt

kalpesh · Accepted Answer

Apply display inlineblockTry by below codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgtltheadgtltbodygt    ltdiv style34color gray fontsize 11px border 1px solid lightgray borderright 1px solid lightgray        borderleft 1px solid lightgray padding 5px display inlineblock34gt        lth4gtTime120149 PMlth4gt        Above is test text for timeltdivgtltbodygtlthtmlgtDemo

kalpesh · Answer

Just change the display property as display table to work fine when using float property Try by this and implement as per your logicHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgtltheadgtltbodygt    ltdiv style34color black float right clear right marginright 10px margintop 5px        marginbottom 5px fontsize 20px fontfamily calibri backgroundcolor white        border 1px solid lightgray padding 5px borderradius 5px         wordwrap breakword display table34gt        ltp style34fontweight bold padding 0 margin 034gt            ann        ltpgt        Hi test message to check the chat messages ltdivgt    ltdiv style34color black clear right marginleft 10px margintop 5px marginbottom 5px        fontsize 20px fontfamily calibri backgroundcolor white border 1px solid lightgray        padding 5px borderradius 5px   wordwrap breakword displ

Auto resize width of floating DIV to fit contain using CSS

Company

Explore

Follow us

Contact Us