CODEWITHSUNDEEP
csshtmlmargin
opraz17
opraz17

Reputation: 85

How to make div below another div

I want the #blue div below the #green div

The #blue div has margin-top : -10px; attribute

 <style>
    #red{
        width: 400px;

        border: 1px solid red;
    }
    #green{
        width: 100%;
        height: 100px;
        background-color: green;
        border-bottom: 2px solid yellow;
        z-index: 2;
    }
    #blue{
        width: 100%;
        height: 100px;
        background-color: blue;
        border-top: 2px solid brown;
        margin-top: -10px;
        z-index: 1;
    }
    </style>


<div id="red">
    <div id="green">
    </div>
    <div id="blue">
    </div>
</div>

Upvotes: 3

Views: 34635

Answers (2)

Martin Turjak
Martin Turjak

Reputation: 21214

Probably adding position:absolute on the #blue and #green div and position:relative on the #red div would do what you want, as I suspect you need one to be behind another. If they need to be one after another then use relative positioning on blue and green too.

Upvotes: 8

Fabiotocchi
Fabiotocchi

Reputation: 216

I cant see the problem, your code is fine. Or did you mean under div? Like the blue div hidden under the green div? Well then you need to add the position: relative ( or absoulte ) attribute on the div you want to move/hide. nad then top or left. Example:

        #blue{
    /* without position: relative/absoulte the z-index wont work!*/
        position:relative;
/* this moves the dives up or down*/
        top: -100px;
/* this move the div left or right! */
left: 15px;
        width: 100%;
        height: 100px;
        background-color: blue;
        border-top: 2px solid brown;
        margin-top: -10px;
        z-index: 1;
    }

Upvotes: 1

Related Questions