Suppose I have a layout containing 3 divs side by side.
The first of these divs has a fixed size of 100px , the third div can not have a fixed size because it will depend on the text inserted in it, however, it can not break the text.
The second div , will have to adapt to the size of the other divs . That way, it will be the only one that can break the text. How can I achieve this?
The image below best describes what I want to do:
See if that solves your problem
css
td span{
font-size:30px;
background:blue;
width:auto;
min-width:1px;
text-align:right;
float:right;
white-space:nowrap;
}
td p{
background:yellow;
float:left;
}
html
<div class="col-md-12">
<table width="100%">
<tr>
<td width="100"><img src="imgaqui.jpg"></td>
<td><p>SEU TXT AKI FORMATADO yg uyg yug uyg ykjg jg fyjkf ygf htj fhg fhg fgh f yjhf </p></td>
<td width="1%" style="white-space:nowrap;text-align:right"><span>R$ 3,50</span></td>
</tr>
<tr>
<td width="100"><img src="imgaqui.jpg"></td>
<td><p>SEU TXT AKI FORMATADO</p></td>
<td width="1%" style="white-space:nowrap;text-align:right"><span>R$ 153,50</span></td>
</tr>
</table>
</div>
Follow his fiddle running link