CSS overflow hidden and floating elements - css

Question

I want a list of items that have a cross icon in the middle on the right hand side. To do this I used an anchor with some padding, floated right, and relatively positioned. The icon is a known width and height.
The items also have some text that should also be centered vertically. The additional problem is that this text has an arbitrary length and I do not want any overflow or wrapping. The text must not overlap the icon and must be allowed to go up to its edge.
The final piece of the puzzle is that the width of each item must grow to the size of its parent. The height should remain fixed.
Here is an example (https://jsfiddle.net/bj6806u6/3/)
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
}
<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>
Removing the -44px; and it is a bit more obvious what the problem is although I still have no idea how to solve it. Surely this must be possible, it seems like such a trivial problem.
So my question: How to keep the cross from moving down? I want it to always look like the first div.

Answer 1

You could do it with positioning instead of floating. The outer div gets relative positioning and then the x gets absolute positioning. It's positioned down from the top 50% of the height of the container and then negative margined back up half of the height of the x to place it in the middle.
div {
background-color: red;
padding-right: 50px;
display: inline-block;
height: 50px;
position: relative;
max-width: 100%;
box-sizing: border-box;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
a {
background-color: green;
position: absolute;
padding: 10px;
top: 50%;
right: 4px;
margin-top: -19px;
}
<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>

Answer 2

Does this help?
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
position: relative;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: absolute;
padding: 10px;
top: 6px;
right: 10px;
}
I positioned the div relative and then made the icon an absolute float from the right of that. Now sure if this is what you mean...

Answer 3

https://jsfiddle.net/bj6806u6/7/
Look at the code, you don't need to set padding-right on div and right on a (1 & 3), set max-width of p to full width subtract 50px (2) to take space for the cross.
div {
background-color: red;
/* padding-right: 50px; */ /* 1 */
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 50px); /* 2 */
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
/* right: -44px; */ /* 3 */
}
<div>
<p>
This is a short paragraph.
</p>
<a>X</a>
</div>
<br />
<br />
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a>X</a>
</div>

Answer 4

Nothing much need to change add div position relative, change a tag position absolute and right -44px to 5px. Live FIddle
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
position: relative; /*add position relative */
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: absolute; /*Change relatie to absolute */
padding: 10px;
top: 6px;
right: 5px;/*Change -44 to 5px*/
}
<div>
<p>
This is a short paragraph.
</p>
<a>X</a>
</div>
<br />
<br />
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a>X</a>
</div>

Answer 5

I have keep the width fixed and expanded the text on hover.Is this the solution your looking for?
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height:auto;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
.wrapR
{
max-width:80%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.wrapR:hover {
background-color: yellow;
overflow: visible;
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
}

Answer 6

If the width of "X" is known or fixed, then you can limit the maximum width of adjacent text to make sure "X" is not moved or overlapped.
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 30px);
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
width:10px;
}