CODEWITHSUNDEEP
htmlcss
Daniel Marschall
Daniel Marschall

Reputation: 3879

Putting image at the right without affecting the layout

I am trying to insert a picture on the right without affecting the text which is in the middle. I tried to put the picture in the front using z-index in hope that it doesn't affect the layout below. But in fact, the text "footer" is not in the screen center anymore.

    <div style="z-index:99;display:inline-block;float:right">
        <img src="https://www.xing.com/img/custom/events/events_files/e/6/3/765539/square96/Apfel_klein.jpg?1443451610">
    </div>

    <p align="center">footer</p>
    <p align="center">footer</p>

This is how the page looked at the beginning: https://jsfiddle.net/eucysjp6/

This is after I tried to insert the picture: https://jsfiddle.net/eucysjp6/1/

Upvotes: 0

Views: 1103

Answers (1)

j08691
j08691

Reputation: 207901

You can position the image absolutely and the table relatively to put the image in the bottom right corner without affecting the text:

jsFiddle example

img {
    position:absolute;
    bottom:0;
    right:0;
}
table {
    position:relative;
}

Upvotes: 1

Related Questions