Reputation: 9338
I have a div with a thick border of 10 px. Inside the div there is a pic and some text. The pic is slightly moved on the border (is a must, should be above the border).
<style>
#main
{
border:10px solid red;
width:400px;
}
.img-to-border
{
margin-left:-10px;
margin-top:-10px;
position:relative;
float:left;
}
.text{
border:1px solid blue;
text-align:right;
padding-right:30px;
}
</style>
<div id="main">
<img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
<p class="text">DCBA padding-right of text is always 30px </p>
</div>
Here is a working code: jsFiddle The problem is if text is one to four symbols longer, it falls down. But, I want it go above the image (above I mean z-indexed, not from uppper side of the screen to the lower side of the screen). P.S. The padding-right is always 30px. So, it goes absolutely the same way like you type numbers on the calculator - from right to the left and above the image, in one line. How to do that for my example?
Again, sorry I repeat that, The pic is slightly moved on the border (is a must, should be above the border).
Upvotes: 0
Views: 1162
Reputation: 4183
you can make #main
position:relative
and the image position:absolute
so the text goes over it. Check the updated jsfiddle here http://jsfiddle.net/85Zk5/2/ (actually you don't need the float in .img-to-border
this way, you can remove it from the jsfiddle should be the same)
Upvotes: 1
Reputation: 125
I can't get your problem properly. I tried with 1 to lots of letters and the text is always placed on the sameline, so it is the image. If you are having any trouble with the image by itself, you could work on
#main {position: relative;} /* Keep it just the same */
img {
position: absolute;
top: -10px; left: -10px;
}
The image would take no place at the page, but would still be visible and with no bumps with the textbox.
Here is a working fiddle: http://jsfiddle.net/BDFJM/
sorry if I get your question the wrong way.
Upvotes: 1