CODEWITHSUNDEEP
htmlcssstyling
Ruslan Lomov
Ruslan Lomov

Reputation: 485

How to margin div inside other div?

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

Upvotes: 2

Views: 1863

Answers (2)

Raźnyy
Raźnyy

Reputation: 114

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 :)

Upvotes: 3

AndrewH
AndrewH

Reputation: 370

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/

Upvotes: 0

Related Questions