Clash Royale CLAN TAG#URR8PPP

Div with background matches text height

Note: IE 8+ is a must :-(

What I currently have,

This is what I want,

It is about the part

<div style="background-color: red;height: 20px;width: 10px; ...


This is what I am trying - https://jsfiddle.net/w3tjbvef/3/

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="vertical-align: middle;">
<div style="background-color: red;height: 20px;width: 10px;/* margin-top: 10px; */display: inline-block;"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

6 Answers
6

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>

<div style="border-left: 10px solid red;padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

<td>

<div style="border-left: 10px solid red; padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>


I'd create a class and add it instead of inline styles.

You could do this by using display: flex on parent div of the element with red line. That will make all the child elements equal in height.

display: flex

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="display: flex">
<div style="background-color: red; width: 10px; margin-right: 10px"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

You could also use CSS table layout.

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="display: table">
<div style="background-color: red; width: 10px; margin-right: 10px; display: table-cell"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

target the td element instead of the inner div, and give it an inline style like this;

<td style="border-left : 10px solid red; padding-left : 8px;">


Or you could use the same inline style on the inner div.

Try with border-left

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="border-left: 10px solid red; padding-left: 5px;">
<div style="display: inline-block;"> </div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="vertical-align: middle;position:relative;">
<div style="background-color: red;position:absolute;top:0;bottom:0;width: 10px;"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.
</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

What you want can be done easily with CSS Grid Layout.
To do that you are gonna need to create 3 columns and two rows, with the width that matches your expectations.
":" would be indside the second column.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.