CSS overflow hidden and floating elements

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.

Are you using bootstrap as your css? If you do there are better ways to achieve this. — Franco
– Franco, Commented Sep 30, 2016 at 4:15
I'd use position: absolute for the X, see this fiddle:jsfiddle.net/bj6806u6/6 is this what you're after? — Wim Mertens
– Wim Mertens, Commented Sep 30, 2016 at 4:26

brian treese · Accepted Answer · 2016-09-30 04:23:49Z

2

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>

answered Sep 30, 2016 at 4:23

brian treese

3412 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

steinybot Over a year ago

Bonus marks for always having the X centered vertically too.

MrLucas · Accepted Answer · 2016-09-30 04:27:26Z

1

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...

answered Sep 30, 2016 at 4:27

MrLucas

278 bronze badges

Comments

Nhan · Accepted Answer · 2016-09-30 04:36:25Z

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>

Baezid Mostafa · Accepted Answer · 2016-09-30 05:00:45Z

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>

Rahul · Accepted Answer · 2016-09-30 04:41:44Z

0

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;
}

answered Sep 30, 2016 at 4:41

Rahul

1381 silver badge14 bronze badges

Comments

Rohith K N · Accepted Answer · 2016-09-30 04:24:28Z

-1

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;
    }

edited Sep 30, 2016 at 4:24

answered Sep 30, 2016 at 4:14

Rohith K N

8916 silver badges17 bronze badges

3 Comments

user663031 Over a year ago

And this does what, how?

Franco Over a year ago

What happen with the first element if you view this in a smaller device?

Rohith K N Over a year ago

"max-width: calc(100% - 30px);" make sure that the width of text is relative to screen size of device.

Collectives™ on Stack Overflow

CSS overflow hidden and floating elements

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related