Develop Reference

Fit div to size of contents without overlapping text?

I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>

Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float

html textarea with constant static uneditable readonly text at end

Having "fake" text inputs with various spans/divs inside the perceived text input is all the rage these days. Look at Stackoverflow. To Tag this question here, I am going to type h-t-m-l-<space> and it will turn that into a token/filter/tag. This is pretty easy to do, put outer div with a border to look like a text input, hide borders for real text input and send click/focus events from the div to the text input. Boom, you're done. Example
I have a need to have the static text go after the input and I need this to be multiple lines. I'm pretty sure I could get the text input example above to have the static text after the input with minor massaging. But going multiline seems to be really hard. If you go multiline, you have to use textareas (is this always true?). Here's an image of what I want:
The whole area looks like a textarea to the user. (The background color is just to help explain the question). Imagine no green text initially, the red text is there though. The user clicks anywhere inside the black border and his cursor goes to the upper right, like a normal empty textarea. Then he types, and the red text just keeps moving along. If the user clicks on, say, 'appending', his cursor goes right after the last green period, not in the word 'appending'. The cursor can only ever be in the green section.
If you extend the solution for the single line text input to this, you would say that green would be a text area, the red would be a div, and the black border would be a container div. But all divs have to be retangular (i think). This is my naive attempt with a similar solution as above. But there are numerous problems with this. How can the first line of the red start in the middle, and then the second line be flush on the left? Here's what's on the jsfiddle:
div{
width:200px;
border:1px solid #000;
}
textarea{
border:none;
font-size:12px;
}
label{
cursor:text;
font-size:12px;
}
<div>
<textarea id="textarea">this is what the user entered</textarea>
<br>
<label for="textarea">This is my constant text</label>
</div>
I'm going to have the red populated dynamically with javascript, but for the purpose of this question, I think it's save to consider just static, constant html.
Is this solvable?

1) Create the textarea
2) Store your static text inside a variable.
3) Populate your textarea with the static text variable
4) When the user starts writing in the textarea(ie: onkeydown event, mouse event..), erase your static content. Store dynamic content in a new variable and keep updating it as user keeps typing. Meanwhile in the textarea, append static text after dynamic content only after user stops typing(ie: onkeyup event). Keep repeating this process.
Calculations:
Dynamic Text = Length of textarea's total text - Length of static text

Rollover Image to Text with Transparent Background

I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!

This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)

If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.

how to get html text covered by other div

Here's the thing. I can get selected text with that solution: How to replace selected text with html in a contenteditable element?
But now i have a problem. I'm adding to website divs with different colors to mark some parts of page (i'm setting just position=absolute, top, left, width, height, backgroundColor and opacity) and now when i want to select marked text, selected is that div (which i guess have higher z-index or something else is placing it over other html). And now when i want to get selected text i'm getting nothing. Not even that div. Just null... Any idea how can i get text covered by that div?
And all these things i'm doing in UIWebView component in iOS but that's not relevant, i think.

Select a text and highlight it to be permanent and free to draw anything

I have a div with text and I want when I select (mouseover from letter to letter) a particular piece of the text to be highlighted simultaneously with background and underline.
Also I want to draw random stuff in the div with the pointer like in paint.
Any ideas on how to achieve this? At least for the first one.

Try to understand below example
text text
this part in css
one
{
color://define color
}
one:hover
{
color://define highlight color
}