I am trying to keep an icon floated left on a liquid text container that has line breaks.
The problem is that when the line breaks, there is a large gap before the text ends and where the div ends. Which makes my floated element start where the gap ends.
Is there a way to make the div only the size of its contents?
Check this codepen: https://jsfiddle.net/e38edtdy/1/ Resize the output area to see the gap of space. The button will auto resize it to see the gap.
*{
padding:0;
margin:0;
top:0;
left:0;
}
#mainContainer{
width:100%;
border:black solid thin;
}
#lt{
color: black;
background-color:gray;
tex-align:left;
max-width:90%;
float:left;
}
#icon{
width:20px;
height:20px;
background-color:blue;
float:left;
}
<body >
<div id='mainContainer'>
<div id='lt'>This is The information This is The information This is The information</div>
<div id='icon'></div>
</div>
<br/>
<input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' />
</body>
