Develop Reference

How can I type inside the parent contentEditable div?

How can you type inside a contentEditable div outside of a child contentEditable div without retaining the child's class, and without changing contenteditable to false.
FIDDLE
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span>
</div>
Should be this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span> spaghetti
</div>
Not this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball spaghetti</span>
</div>

You should be able to click in the red box and type red.
<br><br>
<div class ="container" contenteditable="true">
<span class="meatball" id="meatball" contenteditable="true">meatball</span> spaghetti
</div>
<!-- will work with contenteditable="false" but then I can't type blue-->
css
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
}
.container{
border: 1px dashed red;
color:red;
}

I changed a little bit of your code, maybe you can try this and I hope it helps you. :)
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
position:absolute;
top: 0;
left: 0;
}
.wrapper{
position:relative;
}
.item{
line-height:30px;
min-height:30px;
}
.container{
border: 1px dashed red;
color:red;
padding-left: 150px;
}
<div class="wrapper">
<div class ="container item" contenteditable="true"></div>
<div class="meatball w_o_r_d_s item" id="meatball" contenteditable="true">meatball</div>
</div>

Like this, by adding an invisible character to trick the browser ‌ http://jsfiddle.net/bq6jQ/4/ . I also add an extra <span> to avoid a caret visual bug

How to align center two pictures in Jquery Mobile

How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label>&nbsp</label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami

You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163

I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami

Creating an outline with JS / CSS that wraps a text

Say you have an image with float:left; and a text that flows around the image.
The code is pretty simple:
<img src="image.jpg" style="float:left">
<p style="outline: 1px dotted blue">Lorem ipsum...</p>
Is there a way to display an outline, that wraps around the text but not around the image. A normal outline on the text gives you this:
But I want this:
using a display:inline; on the <p> displays an outline on each line, not 'blockwise' oun the text's visible boundaries.
CSS3 is legit, any hardcore CSS/JS is permitted...

You can try something like this. Shift the image up and to the left so that it obscures the regular border. Then give it it's own border to complete the illusion.
<article>
<img src="image.jpg" style="float:left">
<p>Lorem ipsum...</p>
</article>
article {
border: 1px blue dotted;
}
img {
background-color: white;
border-right: 1px blue dotted;
border-bottom: 1px blue dotted;
margin: -1px 0 0 -1px;
padding: 0 5px 10px 0;
}
Here's the fiddle: http://jsfiddle.net/KW45t/

Check this jsfiddle http://jsfiddle.net/pollirrata/rKaHk/1/
It is not fancy but makes the job

How can I float a div at a fixed height from the top of the container?

I think this will require javascript. I figured it wouldn't hurt to ask though.
We all know how to float an image or div right or left and have the text flow around and below that image. I'm trying to float a div at a fixed width from the top of a container and have text flow around above and below it.
It would be easiest if I could place this div above the paragraph text, but I could insert it if I had to.
I made this crude image outlining what I'm trying to do.
Thanks!

a bit of a cheat but possible using a dummy spacer
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
.fl {
float: left;
clear: left;
margin: 10px 10px 10px 0;
}
.fr {
float: right;
clear: right;
margin: 10px 0 10px 10px;
}
.dummy {float: right; height: 300px; width: 1px; background: #f00;}
HTML:
<div id="wrapper">
<img src="http://dummyimage.com/100x100/000/fff" width="100" height="100" class="fl">
<span class="dummy"></span>
<img src="http://dummyimage.com/100x200/DAD/fff" width="100" height="200" class="fr">
<p>all your paragraphs follow</p>
</div>
Working Example: HERE
and the spacer does need to be at least 1px wide, but it can be transparent

Have you tried something like this?
http://jsfiddle.net/8DczT/1/

This is exactly what a float does; it puts a box wherever you specify, and content flows around it. See this jsFiddle.

Put a margin-top on your floated div, to push it down from the top, something like this:
<div> <!-- parent containing div -->
<div style="float: right; margin-top: 50px">floated div</div>
<div>paragraph 1</div>
<div>paragraph 2</div>
</div>
As long as you get the margin right, you can floa it halfway between the center of the two paragraph divs.

How can I have centered text and right-aligned image in the same element?

I have some th elements with text in them that should be centered and they also contain images:
The up/down arrow graphic is a separate image.
My question is, what is the simplest reliable way to position that image over to the right side of the th element while keeping the text centered?
I'm open to using jQuery/JavaScript if there's a reasonably simple way to do it.
One caveat: I need the up/down graphic to be a separate image, not part of the header background.
<th>
Title
<img src='/images/sort_unsorted.jpg' />
</th>

Just float the image to the right:
th img {
float: right;
}
DEMO: http://jsfiddle.net/marcuswhybrow/ZxUMY/

To get a good handle on positioning (if you don't want to use a background image) you'll have to wrap the content in a block level element, like a DIV. You can't use position: absolute; on child elements of a table cell.
So, I recommend something like this:
HTML:
<table cellpadding="0" cellspacing="0">
<thead>
<th>
<div class="positioning">
Left
<div class="img"> </div>
</div>
</th>
<th>
<div class="positioning">
Center
<div class="img"> </div>
</div>
</th>
<th>
<div class="positioning">
Right
<div class="img"> </div>
</div>
</th>
</thead>
<tbody>
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tbody>
</table>
Imagine <div class="img"> </div> is just a 12px x 12px image.
CSS
table {
border: 10px solid rgb(230,230,230);
color: white;
}
table thead th,
table tbody td {
background: black;
border: solid 1px white;
font: bold 12px Helvetica, Arial, sans-serif;
padding: 10px;
}
table thead th {
padding: 0;
text-align: center;
}
table thead .positioning {
padding: 10px 32px;
position: relative;
}
table thead .img {
background: red;
height: 12px;
margin-top: -6px;
position: absolute;
right: 10px;
top: 50%;
width: 12px;
}
The important thing to remember here is that you give the left and right sides of the positioning div enough padding to make room for the image (ie: padding: 10px 32px;). Otherwise the image will overlap your text.
Here's a fiddle: http://jsfiddle.net/brandondurham/nXQeR/

Exactly how did you want the text to be centered, equidistant from the left/right edges of the th or from the left edge of the th to the left side of the image? There is a small difference between the two since your image is relatively small, but still a discernible difference.
Equidistant to image, the solution is easy (as Marcus answered):
th img { float:right; }
Equidistant to th edges requires a bit more, since you need to break the image out of the page flow:
th {
display:block;
position:relative;
text-align:center;
}
th img {
position:absolute;
right:0;
/* optional, for vertically centering the image
top:50%;
margin-top:-[image height/2]px;
*/
}
EDIT: fixed for positioning in a table cell (thanks Brandon), and here's a simple fiddle:
http://jsfiddle.net/brillyfresh/4LDZ9/