2

I'm learning HTML and trying to build my own site, but I can't find what's happening with my tag, it appears in the bottom of the site, even when I tell the CSS not to do it. The position is "relative" but it is appearing out of the borders of his parent.

@charset "UTF-8";

body {
    background-color: rgba(20, 20, 20, 0.9);
}

div#interface {
    position: absolute;
    width: 88%;
    height: 100%;
    margin: -20px auto 0px 50px;
    padding: 15px;
    background-color: #678fd2;
}

header {
    width: 100%;
    height: 129px;
}

/* Ajuste Input Email */

header table {
    position: relative;
    margin: 20px 50% auto 700px;
    background-color: white;
    width: 350px;
    height: 20px;
}
<!DOCTYPE html>

<html lang="pt-br">

    <head>
        <meta charset="UTF-8" />
        <title>S</title>
        <link rel="stylesheet" type="text/css" href="thunder_css.css" />
        
    </head>
    
    <body>
        <div id="interface">

            <header>
                <figure class="imagem-logo">
                    
                </figure>

                <!-- CAMPO PARA DIGITAR INFORMAÇÕES DE LOGIN -->
                <table cellspacing="0" role="presentation">
                    <tr>
                        <td>
                            <input type="email" class="inputtext" name="email" id="email" value tabindex="1" data-testid="royal_email">
                        </td>
                    </tr>
                </table>
            </header>

        </div>
    </body>

</html>
Marcus Rigonati
  • 25
  • 8
  • 1
    Absolute positioning removes the element from the normal structure of the dom. It can no longer contain its elements. Set the div#interface to position relative. – Rick Calder Jun 24 '17 at 16:23
  • @RickCalder Yes, I tried, but the Continues in the very bottom, and plus, the div#interface reduce to a little square instead of the entire page. – Marcus Rigonati Jun 24 '17 at 17:32
  • I was able to solve the problem, it was simply the image margin too large, but my interface still like a little square. – Marcus Rigonati Jun 24 '17 at 17:51
  • Well, I did it, this is the link that helped me!! Thank you for the help!! https://stackoverflow.com/questions/14545507/div-height-in-percentage – Marcus Rigonati Jun 24 '17 at 18:17
  • @Marcus Rigonati, if your question is solved, you can post an answer to your won question and accept it! – cjl750 Jun 24 '17 at 18:45

1 Answers1

0

The problem is the HTML and Body height, I put 100% in both heights in CSS and it worked. I found the answer here: Div Height in Percentage

Marcus Rigonati
  • 25
  • 8