Question

I am trying to position some divs inside another container,
When I set position: relative; on those divs they are drawn inside the container but when I add the top and left style properties, they aren’t drawn correctly

here is my code:

<table style="background:black;width:80%;height:90%;">
    <tr>
        <td style="background:yellow;width:15%">Left Pane</td>
        <td style="background:black;width:85%">
            <div id="a" style="background:green;position:relative;top:1px;left:80px;width:20%;height:20%">a</div>
            <div id="b" style="background:blue;position:relative;top:10px;left:14px;width:20%;height:20%">b</div>
            <div id="c" style="background:red;position:relative;top:10px;left:14px;width:20%;height:20%">c</div>
        </td>
    </tr>
</table>

as you can see divs #b & #c should be placed on each other because of their top & left properties but they are drawn beneath each other,
If I set position: absolute; they are placed on each other, but they aren’t positioned according to their container but according to the screen.

Is there any way to position the divs on top of each other according to their container?

Answer 1

learn about position relative and absolute:

css tricks: position relative and absolute

in short:

the container elements gets position: relative;

the elements inside it, get position: absolute; and values for top/bottom/left/right

this allows you to control positioning and it is cross-browser compatible (old versions of IE handle positioning in a terrible way!)

PS a couple of generic suggestions to improve your coding skills:

• try to avoid using tables for layout.

• use an external css file rather than inline – it’s easier to mantain on the long run and reusable.