Question

I’m getting a little confused with using Absolute and Relative positioning. Basically I have a sidebar which has roughly 4 divs in it.

I want div 3 to always be at the same place on every page, as occasionally div 1 or div 2 are missing, which in turn pulls div 3 up.

I tried adding position: relative to the sidebar, and position: absolute to div 3. This puts it in the correct place on the sidebar, but it makes div 3 overlap the other divs.

What am I missing out here?

---

Layout for anyone confused:

 <div id='sidebar'>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
        <div id='div4'></div>
 </div>

Answer 1

That’s how absolute positioning is supposed to work – the absolutely positioned element is removed from the content flow, and takes up no space – so it can’t push the elements down.

You’re going to need to use some sort of placeholder, or come up with something using margins. I’m not sure about how your elements need to be placed, but, if div3 always has to be, say, 400px from the top, why don’t you do it like this:

<div id='sidebar'>
    <div style="height:400px">
        <div id='div1'></div>
        <div id='div2'></div>
    </div>
    <div id='div3'></div>
    <div id='div4'></div>
</div>

This way, you can hide div1 and div2 at will, without the need to use absolute positioning at all.