• I have an image set to absolute but when I resize the page, the image doesn’t move with the rest of the elements. Is there a way to make it liquid?

Viewing 7 replies - 1 through 7 (of 7 total)
  • you have a link to your site?

    absolute is by nature not flexible….
    its absolutely positioned to a containing box…..either whatever its nested in that has a position:relative attribute, or else the edge of your monitor

    It depends where on the page you are trying to put it and which parent element is assigned position:relative (as mentioned above).

    Post the URL.

    Thread Starter virg

    (@virg)

    Thanks! Here’s the page where I’m testing it http://www.graphictask.com/?page_id=2 It’s the WordPress logo. I’m using absolute positioning for it because everything else has margins and properties that pushes over other content. The logo will be very close to text.

    position:absolute’s are always positioning themselves to the closest position:relative, and in case no one is assigned it align itself to the body. Simply make a new container in which area you want the image (like .post for example) and add position:relative; to it.

    Thread Starter virg

    (@virg)

    Thanks WizardRegis! It finally makes sense. But how would I align the absolute image to center? When I try top, left, or right it looses it’s liquid. So I tried in the div,

    margin-right:auto;
    margin-left:auto;
    display:block;

    but it doesn’t work..

    i would use relative rather than absolute for <div class=”absolute”>.

    .absolute {
       position:relative;
       top:-50px;
       right:;

    you can play with top and right. see what will fit you best.

    Thread Starter virg

    (@virg)

    Nvm, I figured it out. Had to define a width 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to make absolute positioned image “liquid”?’ is closed to new replies.