How to make text float above a column when mouse?

Question

I want some text to float around the edge of the column when I click on it, just like my IDE:

Here is what I still have .

I can make it float around if I change the position of the element to absolute , but then it does not "take up any space".

In addition, I do not mind having a border around the float bit.

Anyone have any ideas how to do this?

Answer 1

Everything worked out for me, and I came up with a solution that does not require any markup changes, I did some testing and it seemed to work in Chrome 26 , <> Safari 5.1.7, Firefox 20 , IE10 , IE10 in IE9 and IE10 mode in IE8 mode , it looks the same in all these browsers and browser modes, it starts to interrupt when using IE10 in IE7 mode .

It looks like this:

Basically what I did was set float:left to li and then width:auto to li:hover , this ensures that the text will float over the edge of the column.

Then, to add a border, I present the pseudo-element immediately after li , which inherits the width of the previous li . Then I set its borders, margins, heights and line heights to position this pseudo-element on top of the top li . I set margin-left to 150px to make sure it only displays beyond li , which is larger than the column width.

To add some space to the right, I changed white-space: no-wrap to white-space: pre , which will save some added empty space inside li (if it is added, this is not a requirement, I added it to make it look a little prettier) .

Here's jsFiddle .

Here's the HTML:

 <div> <ul> <li>some really long text </li> <li>some text that doesn't fit into the column width </li> <li>yeah dude, this is sample text </li> <li>woot woot! double rainbows </li> </ul> </div> 

And here is the CSS:

 li { white-space: pre; overflow-x: hidden; background-color: #f2f2f2; line-height: 21px; width: 150px; float: left; clear: both; } li:hover:after { content:''; height: 19px; margin: -21px 0px 0px 150px; border-width: 1px 1px 1px 0px; border-style: solid; display: block; } li:hover { width: auto; } div { width:155px; border-right: 3px solid; background-color: #f2f2f2; } ul:before, ul:after { content:' '; display: table; } ul { list-style: none; padding: 5px 0 5px 5px; margin: 0; } ul:after { clear: both; } body { margin: 0; padding: 0; } 

UPDATE

I included the Micro clearfix hack in the div , now it adjusts its height based on its contents, instead of having a fixed height.

UPDATE 2

The problem with scrolling is that the width of the element containing the element actually changes when you set the width:auto child elements, since the scroll bar is on the right, it continues to move. I tried using an extra div wrapper, but it seems impossible to float over the top of the scrollbar from anywhere inside the element that creates the scrollbar. The only way I can scroll it is to set overflow:hidden to ul and then use the jQuery ScrollTo plugin to scroll up and down inside ul .

Scrolling jsFiddle example

Answer 2

I found two ways to support this. The first requires you to add span tags inside each li, but it seems to work in all browsers. The second works with markup exactly the same as yours, but does not work in chrome and safari.

All browsers:

http://jsfiddle.net/vkBqg/1/

This solution is extremely simple and basically boils down to:

 li { white-space: nowrap; overflow-x: hidden; width: 150px; } li:hover { overflow-x: visible; } 

Everything except web browsers (chrome, safari):

http://jsfiddle.net/aeARH/1/

This is a lot of hackers and requires you to change the width and display type of li, and then make it break the line. Lee: The hover looks something like this:

 overflow-x: auto; width:auto; content:"\A"; display:inline; 

Cancellation in both of them should be a position: absolute does not work when you try to maintain a natural order between elements.