Question

I have a page like below;

<style type="text/css">
#div1 {
    height: 100px;
    background-color: #CCCCCC;
}
#div2 {
    display: inline;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
#div2 a {
    display: block;
    background-color: #FF9900;
    height: 51px;
    width: 150px;
    padding-right: 50px;
    text-decoration: none;
    word-wrap: break-word;
    white-space: normal;
}
#div2 img {
    border:0;
    float: right;
}
</style>

<div id="div1">
    <div id="div2">
        <a href="">text1 text2 text3 text4  text5 text6 text7 text8<img src="image.jpg"></a>
    </div>
</div>

What I am getting is something like this;

and I want this;

Here is the fiddle.

Answer 1

You need to add position: relative; to #div2 a and position: absolute; right: 0; top: 0; to #div2 img.

See working jsFiddle:

HTML:

<div id="div1">
    <div id="div2">
        <a href="">text1 text2 text3 text4  text5 text6 text7 text8<img src="http://i.imgur.com/VlyB1.jpg"></a>
    </div>
</div>​

CSS:

#div1 {
    height: 100px;
    background-color: #CCCCCC;
}
#div2 {
    display: inline;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
#div2 a {
    position: relative;
    display: block;
    background-color: #FF9900;
    height: 51px;
    width: 150px;
    padding-right: 50px;
    text-decoration: none;
    word-wrap: break-word;
    white-space: normal;
}
#div2 img {
    border:0;
    position: absolute;
    right: 0;
    top: 0;
}​