Question

I am trying to set a nested div on the top right of its parent div and text to wrap around the nested div.

I really should understand how position, float and display work together.

Here is my sample:

CSS

.parentDiv {
    width:295px;
    border:1px solid black;
}
.parentDiv .childDiv1 {
    width:36px;
    border:1px solid black;
    float:left;
}
.parentDiv .childDiv2 {
    width:210px;
    border:1px solid black;
    float:left;
}
.parentDiv .childDiv3 {
    width:44px;
    right:0px;
    top:0px;
    border:1px solid gray;
    position:relative;
    float:right;
}

HTML

<div class="parentDiv">
    <div class="childDiv1">
        <img alt="adfasf" src="../img/image.gif">
    </div>
    <div class="childDiv2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        <div class="childDiv3"> <a href="#" title="safasf" id="adasf"><span>search here</span></a>

        </div>
    </div>
</div>

Live jsfiddle

Answer 1

Like this: jsFiddle. Make the child div appear first as a child of childDiv2 and keep the CSS as-is.