11

When I absolute position an object, it is stuck there. When you resize the browser window, it stays there while the other objects slide around, thus killing the whole point.

Now this is only for me. Obviously it works on normal websites, such as the one your on right now. when you resize the window everything moves around and stays in its overall template.

How can I achieve this with absolute positioning?

6
  • Why must you use absolute positioning? What it sounds like you're describing is a css liquid layout. Commented Oct 9, 2011 at 20:04
  • sorry agian, but what is css liquid layout? and I guess I dont have too, its just easier. That guys answer worked though VV
    – roozbubu
    Commented Oct 9, 2011 at 20:17
  • A liquid layout is a technique used to make the webpage expand (liquid) the size of the browser, including resizing. Do some research and you'll see what I mean. Also, I have no idea who "that guy" is. Commented Oct 9, 2011 at 20:18
  • alistapart.com/articles/negativemargins Commented Oct 9, 2011 at 20:19
  • thanks that helped! and that guy is Rob W, but the method is a bit flawed. this should work better. thanks agian!
    – roozbubu
    Commented Oct 9, 2011 at 20:28

2 Answers 2

30

You need to put the absolutely positioned div inside a relatively position div. Anytime the relatively positioned div moves, the absolute positioned div will also move with it.

<div class="relative" >
    <div class="absolute">absolute</div>
</div>

.relative{
    position:relative;
    top:100px;
    left:100px;
    width:500px;
    height:500px;
    background:blue;
}


.absolute{
    position:absolute;
    width:100px;
    height:100px;
    background:red;
    top:30px;
    left:50px;
}

Check working example at http://jsfiddle.net/w2EMu/

0
1

The best solution would be to avoid absolute positioning. But if you use it and want to reposition your absolute object you could register a resize method. E.g. jQuery.resize() and reposition it yourself. If you are not using jQuery you have to use document.addEventListener and document.attachEvent.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.