CODEWITHSUNDEEP
csspositioncss-position
AndroidHustle
AndroidHustle

Reputation: 1814

Position image so that it's always positioned the same way no matter window width

I'm trying to position an image on my website so that it looks like it's paper clipped to the website content, in the outer skirt of the body block, like so:

enter image description here

I manage to get this positioning using the position: absolute; css attribute, and then position the image using top / right values. Problem is though that this only works for my home full screen (and others with same res of course), and as soon as I narrow down the window it looks like this:

enter image description here

The image is shifted inwards because my css tells it to. Has anyone got any idea of what CSS attribute I should use to have the image positioned at the same place no matter how wide the window is?

EDIT: This is the CSS that I solved it with using the input from George and Ed:

#picture-container {
            position: relative;
            max-width: 1px;
            max-height: 1px;
        }

        #image {
            position: absolute;
            right: -932px;
            top: -30px;
        }

Upvotes: 0

Views: 1625

Answers (5)

Chris Kortjohn
Chris Kortjohn

Reputation: 1

if you can use percentages then here is a way to make an object REALLY stay put. dont omit the body CSS

<body style="padding:0; margin:0">

<div>

<div style="background-color:red; width:100%; height:300px; position:relative;">

<div style="background-color:green; width:100px; height:100px; position:absolute; margin: 10%;"></div>

</div></div>

</body>

Upvotes: 0

ericg
ericg

Reputation: 103

Like the people above have mentioned, it has to do with position relative. However, in order for it to remain stationary, you have to make a div that floats, and is not part of the normal content layout.

Here is an example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Example</title>
    <style>
        body, html {padding: 0; margin: 0;}
        #wrapper {width: 960px;margin: 0 auto;}
        .floater {height: 100%; width: 100%;position: absolute;}
        .inner-float {position: relative; width: 1020px; margin: 0 auto;text-align: center;}
        .inner-float img {width: 150px; top: -10px; right: 0px;position: absolute;}
        .content {}
    </style>
</head>
<body>
    <div class="floater">
        <div class="inner-float">
            <img src="./clipboard_icon.png" />
        </div>
    </div>
    <div id="wrapper">
        <div class="content">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

</body>
</html>

Hope this helps.

-e

Upvotes: 0

CherryFlavourPez
CherryFlavourPez

Reputation: 7487

The fix will be to add position: relative to your container (creating a new positioning context), and then position the image relative to that. Currently, you are positioning the img relative to the body.

Check out this fiddle that shows the difference that declaration makes, screenshot below.

enter image description here

I'd really recommend spending 5 minutes and reading this to make sure you're up on using CSS to layout and position things.

Upvotes: 3

user1633525
user1633525

Reputation:

To position image outside of main div, use negative values on right:

 .image{
    position: absolute;
    top: 200px;
    right:-50px;
 }

Upvotes: 0

George Mickleburgh
George Mickleburgh

Reputation: 1217

You should add

position: relative;

to the content container and then have the image positioned absolutely inside of that. The absolute positioning will then be based off that div, rather than the page.

Upvotes: 2

Related Questions