CODEWITHSUNDEEP
htmlcss
spal
spal

Reputation: 771

Issue with text-overflow and float right

Here is the jsfiddle http://jsfiddle.net/DBEHJ/7/

I have a div 'header' with a title and a 'close' button that appears to the right(float: right) of the 'div'. I am using text-overflow: ellipsis for the title, but if I use it the close button(float: right) would no longer appear. This behavior is not consistent in all the browser. Below is the code

<div class="header"> 
    <span class="title">A Very Long Title</span>
    <span class="closeButton"> [X] </span>
</div> 

.header {
    height: 49px !important;
    border: 1px solid #d3d3d3;
    background-color: #E5E5E5;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header .title {
  line-height: 50px;
  margin: 20px;
  font-size: 18px;
  color: #444444;
}

.closeButton {
    float:right; 
    margin: 10px;
}

Appreciate any responses.

Upvotes: 0

Views: 214

Answers (3)

Karthik Chintala
Karthik Chintala

Reputation: 5545

You can use top, right, margin css properties to do this.

All you've to do is set the top and right properties to zero and set the margin to auto.

I've modified @blex answer. Infact a single line of margin css.

.closeButton {
    position:absolute;
    top:0;
    right:0;
    margin: 0 auto;
}

FIDDLE

Hope it helps

Upvotes: 0

Danield
Danield

Reputation: 125443

Just switch the order of the title and the button and it will work

<div class="header"> 
    <span class="closeButton"> [X] </span>
    <span class="title">A Very Long LongTitle</span>
</div>

FIDDLE

Upvotes: 1

blex
blex

Reputation: 25634

You could use position:absolute on your .closeButton like so :

.header {
    ...
    position:relative;
}

.closeButton {
    position:absolute;
    top:0;
    right:0;
    margin: 10px;
}

Fiddle Demo

Edit

To give your close button some room when the title is too long, you can add some padding-right to the header, and substract that in its width so that it stays 200px.

.header{
    ...
    width:170px;
    padding-right:30px;
}

Fiddle Demo

Upvotes: 1

Related Questions