image display in block <a> - CSS
Posted
by
blasteralfred
on Stack Overflow
See other posts from Stack Overflow
or by blasteralfred
Published on 2012-04-05T17:12:47Z
Indexed on
2012/04/05
17:30 UTC
Read the original article
Hit count: 222
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.
Thanks in advance...:)
© Stack Overflow or respective owner