How to margin div inside other div?


Tags: html,css,styling

Problem :

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



Solution :

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


    CSS Howto..

    How to let css selector exclude an element?

    How to finish my modal ajax code to work correctly?

    HTML/CSS: How to make a bar on the side to take you to a certain part of the page

    How to override inline CSS (specifically a div with certain class) with external CSS?

    How do I eloquently toggle a show/hide event in a list of multiple collapsible items with jQuery?

    How to make a “Fixed” element Scrollable

    How can i make it through using bootstrap grid?

    How to avoid clipping in CSS?

    Show/hide css class by url parameter with php

    How to push down absolute positioned div with CSS

    How do I get JavaScript to clear the previous onclick element when a user moves on to the next click?

    How to programmatically apply CSS definitions to the whole page?

    How to style the wp_list_page in wordpress?

    How to write multiple css selectors in one line?

    How can I add a consistent left margin to a checkbox label?

    How to put a menu over the full width of the page using HTML and CSS?

    How to make text box scroll vertical in overflow css html?

    How to get user submission to post to page

    How can I set one style to override another conflicting style in CSS?

    How to make iframe use all height available to it

    What is this HTML notation and how can I use it myself?

    How to color row on specific value in angular-ui-grid?

    How to customise button ( CSS, HTML)

    How do I float a div to the right of a title div without affecting the content of the title?

    Show a
  • line like is hovered
  • how to make a navigation 100% width within an header wrapper

    Pure JavaScript - how to add class to a class? Or change style in class

    How to write css for fixed header and scrollable table

    How to feather the edges of an image using CSS

    Showing the child category when Clicking the parent category