css bottom is not positioning at the bottom of the page

Question

that creates a centered list of buttons. Unfortunately at the top of the page.

<html>
<head>
    <style>
        #test {
            display: table;
            margin: 0 auto;
            bottom: 5em;
        }
        .mybtn .button {
            background-color: orange;
            border: 1px solid green;
            width: 120px;
            color: white;
            font-size: 14px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: block;
        }
    </style>
</head>
<body>
<div id="test">
    <div class="mybtn">
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
    </div>
</div>
</body>
</html>

any reason why bottom: 5em does not work ?

as a beginner in css I would appreciate any hint on why I need also to set .mybtn make the css work !

You need to set a `position: relative` on `#test`. And since the document is only as long as the content, you need to set a height on the html and body tags. — disinfor, Nov 21 '19 at 19:57
unfortunately it has been closed with a link which didn't bring a solution. However I have found one. Thanks for the guiding replies — user3732793, Nov 22 '19 at 09:10

score 0 · Answer 1 · answered Nov 21 '19 at 19:59

Just place position:relative

<html>
<head>
    <style>
        #test {
            position: relative;
            display: table;
            margin: 0 auto;
            bottom: 5em;
        }
        .mybtn .button {
            background-color: orange;
            border: 1px solid green;
            width: 120px;
            color: white;
            font-size: 14px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: block;
        }
    </style>
</head>
<body>
<div id="test">
    <div class="mybtn">
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
    </div>
</div>
</body>
</html>

sorry that didn't work. Actually did look even worse as it moved above top. I tried IE, CHrome, Firefox on Windows and MAC — user3732793, Nov 22 '19 at 07:50

css bottom is not positioning at the bottom of the page

1 Answers1