How to margin div inside other div?

Question

How to margin div inside other div?

1.8k Views Asked by Ruslan Lomov At 23 June 2015 at 14:50

html body,simple form with table and two divs inside(login and table):

<body>
    <div id="container">
        <form>
            <div class="login">
                <div class="table">
                    <table class="userInput">
                        <tr>
                            <td><input type="text" placeholder="Username" id="username"
                                name="login"></td>
                        </tr>
                        <tr>
                            <td><input type="submit" value="submit"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
</body>

My css:

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}

table.userInput {
    margin-top: 15%;
    width: 100%;
    height: 100%;
}

div#container {
    background: pink;
    height: 100%;
}

div.login {
    background-color: black;
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    height: 10%;
    width: 10%;
    padding: 10px;
}

div.table {
    width: 100%;
    height: 100%;
    background-color: grey;
}

Need my div class="table" after margin-top:15% of table class="userInput" visible with grey background but after offset i can see black color of login div class="login". How to make it grey with margin-top? enter image description here

Original Q&A

There are 2 best solutions below

AndrewH On 23 June 2015 at 15:10

Change margin-top: 15%; to padding-top: 15%;

table.userInput {
    padding-top: 15%;
    width: 100%;
    height: 100%;
}

Based on your picture I think this is what you want.

top padding

http://jsfiddle.net/7j8z3v3w/

**Raźnyy** · Accepted Answer · 2015-06-23T15:13:12.040000

If i understand your question well i suggest you to change

padding:10px;

to

padding-top:10px;

and increase width of <div class='login'> element

EDIT

Your image change almost everything , please check this fiddle : SOLUTION

Only thing i change is remove margin-top:15%; and replace it with padding-top:15%; so i can add background-color:grey; to table.userInput element.

Looks like in your image. Let me know if it helps :)

How to margin div inside other div?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in STYLING

Trending Questions

Popular # Hahtags

Popular Questions