Question

Please consider the following HTML with styling.

<div style="border: 1px solid;height: 600px;">
    <button id="create_new_estimate" style="position:relative;top:10px;left:10px;">
        Create New Estimate
    </button>

    <table style="position:relative;top:10px;left:300px;">
        <tr>
            <td>
                cell 1
            </td>
        </tr>
        <tr>
            <td>
                cell 2
            </td>
        </tr>
    </table>
</div>

You can see it here.

I want to be able to position both of these elements side by side. Eventually I will be adding many more elements inside this div. I thought that position:relative would allow me to just give a top and left style attribute to each element to give it a position relative to the parent div. However as you can see in this example, both elements have top:10px; so I would expect them to be next to each other, but they are not next to each other.

Do you know how what styling I can use, so I can simply give each element a top and left attribute to position them inside the parent. Thanks!

Answer 1

Give you outter wrap div a “position:relative;” and change you current “position:relative;” to “position:absolute;”

Use “top” and “left” attributes alongside the “position:absolute” and think of “position:relative” as your anchor. It you don’t have a parent element with “position:relative” then the browser window becomes your anchor.