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


Tags: html,css,image,border,margin

Problem :

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).



Solution :

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)


    CSS Howto..

    How does a CSS rule override another CSS rule?

    How to get an image's height and set its parent height to auto?

    How to add more css properties into an CSS rule without remove other existing properties

    How to make a descriptions list inline?

    Thai line breaking: how to break Thai text effectively

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How to Center Text in a JavaScript Function?

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    How do I get Jquery to toggle display

    How to adopt drop down menu for mobile devices? [closed]

    How to put JavaScript from tutorial into my website?

    Jquery: How to find if element has inline property (not in CSS)

    How do I make a absolute positioned div have a width equal to it's parent minus some margin

    How can I change color of visited cgridview row?

    Tricky: In CSS and HTML, how to make a sub DIV go under the container if the container has a z-index of 0?

    CSS how to deal with a lot of sprite without having to create a new css class

    How can I “hack” the Thunderbird Lightning extension to fully color categories

    How to get glyphicons working in twitter-bootstrap?

    How do I put an image on top of an image without using absolute positioning?

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    how to remove xlink default styling

    how to make layers not overlap with each other in css [closed]

    How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

    How to select only one child element in CSS?

    How can I set the body color of a web page to the current width and height of the monitor?

    CSS: How to prevent Background colour to be overwritten by colour from less-file

    How to use selenium IDE to find/check if a div object has children?

    How do you create a html scrollable area, that just uses the main browser scrollbar

    How to hide class=“” CSS

    How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles