Question

I want to generate multiple divs in a specified area. I want to load the relative positions to the parent of these divs out of a database.

So for example:

1. div 1 – 250px, 100px
2. div 2 – 400px, 800px
3. div 3 – 50px, 85px

As you can see the problem here is that these divs aren’t loaded in order of their relative location. Also there will be overlapping divs.

How would I go about placing these in the correct relative position to the parent.

I load these locations out of a MySQL database with PHP, they each have an id and the locations. I want to put all the divs in one parent div.

I tried using both relative and absolute position in CSS but they didn’t get me the desired result.

Answer 1

Make the parent have a position of relative or absolute. Then give all children position ‘absolute’ with a left and top which come from the database.

HTML:

<DIV id="parent">
    <DIV STYLE="left: 25px; top: 10px">DIV 1</DIV>
    <DIV STYLE="left: 40px; top: 80px">DIV 2</DIV>
    <DIV STYLE="left: 50px; top: 85px">DIV 3</DIV>
</DIV>

CSS:

#parent {
    position: relative;
    left: 0px;
    top: 0px;
}

#parent DIV {
    position: absolute;
}

Fiddle here: http://jsfiddle.net/xgG2C/