CODEWITHSUNDEEP
htmlcssimagebordermargin
Haradzieniec
Haradzieniec

Reputation: 9338

css: Image is on the border of parent's div. How to make text above that image in a div?

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

Answers (2)

Rodolfo
Rodolfo

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

fernandofleury
fernandofleury

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

Related Questions