Is it really impossible to make a div fit its size to its content?

HtmlSizeWidth

Html Problem Overview

I'd like to clarify whether it's possible or not to make a div fit its size based on the content's size without having to make elements float or having to make their position absolute. Is it possible?

Html Solutions

Solution 1 - Html

CSS display setting

It is of course possible - JSFiddle proof of concept where you can see all three possible solutions:

  • display: inline-block - this is the one you're not aware of

  • position: absolute

  • float: left/right

Solution 2 - Html

You can use display: inline-block.

Solution 3 - Html

You can use:

width: -webkit-fit-content;
height: -webkit-fit-content;
width: -moz-fit-content;
height: -moz-fit-content;

EDIT: No. see http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

ALSO: http://dev.w3.org/csswg/css-box-3/

Solution 4 - Html

you can also use

>word-break: break-all;

when nothing seems working this works always ;)

Solution 5 - Html

it works well on Edge and Chrome:

  width: fit-content;
  height: fit-content;
Categories
Recommended Html Solutions
Recommended Size Solutions
Recommended Width Solutions

Previous Solution:

Are Variable Operators Possible?

JavascriptVariablesOperatorsOperator KeywordDynamic Variables

Next Solution:

Absolute positioning inside absolute position

HtmlCssCss Position

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGabriele CirulliView Question on Stackoverflow
Solution 1 - HtmlRobert KoritnikView Answer on Stackoverflow
Solution 2 - HtmlMatt BallView Answer on Stackoverflow
Solution 3 - HtmlThe_HTML_ManView Answer on Stackoverflow
Solution 4 - HtmlmeghaMView Answer on Stackoverflow
Solution 5 - HtmlHungNM2View Answer on Stackoverflow