CODEWITHSUNDEEP
htmlcss
Armen Babakanian
Armen Babakanian

Reputation: 2305

CSS unexpected behaviour, margin applied to parent tag when defined in child

I am trying to push the parent to the top of the page so it will not show the white area on the top, but the child seems to be pushing the parent down. Why is this?

Here is the jsfiddle page:

http://jsfiddle.net/vy3pgvfe/

here is the Html:

<body>
    <div class="container">
        <div class="row">
            <!-- main content area -->
            <div class="col-sm-9">
                <div id="main-content">
                    <div class="jumbotron">
                         <h1>Hello, world!</h1>

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                    <button id="show-sidebar">sidebar</button>
                </div>
            </div>
            <!-- col-sm-9 -->
        </div>
    </div>
    <!--/.container-->
</body>

</html>

and the css:

* {
    margin: 0;
}

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

}

.container {
    width: 100%;  
    height: 100%;   
    background-color:red;   
}

.row {
    position: relative;
    height: 100%;
}

.col-sm-9 {
    height: 100%;
    background-color: rgba(190, 190, 190, 0.5);
}

#main-content {
    background-color: rgba(45, 30, 90, 0.5);
    margin: 5px;
    padding: 5px;
}

Upvotes: 1

Views: 91

Answers (3)

j08691
j08691

Reputation: 207881

Your collapsing margin issue can be fixed by adding overflow:auto to .col-sm-9:

.col-sm-9 {
    height: 100%;
    background-color: rgba(190, 190, 190, 0.5);
    overflow:auto;
}

jsFiddle example

Upvotes: 1

rp.beltran
rp.beltran

Reputation: 2851

You can give the outside padding, and remove the inside margin. It should work in the same way.

.container {

    width: 100%;

    height: 100%;

    background-color:red;
    padding-top:5px;

}

#main-content {

    background-color: rgba(45, 30, 90, 0.5);

    margin: 0px;

    padding: 5px;

}

Upvotes: 1

Marc B
Marc B

Reputation: 360572

margin: 5px; will add margins to all 4 sides of the box, giving your 5pixels of whitespace. You probably want

margin: 5px;
margin-top: 0px;

or

margin: 0 5px 5px 5px;

to eliminate the margin on top of the box.

Upvotes: 1

Related Questions