CODEWITHSUNDEEP
jquerycss
Nur Aini
Nur Aini

Reputation: 393

css position an absolute div in relative with a slideable menu

I am really not familiar with css. I really need some help with this, i have setup a fiddle displaying my problem,

http://jsfiddle.net/naini/mBMq3/6/

.contentBack{   
    width : 300px;
    border : solid 30px;
    position :absolute;
    top :10;
}

.masterDiv{
    background-color: grey;
    border: solid 1px;
    width: 80%;
    height:400px;
    margin-top: 60px;
    text-align: center;
    padding : 10px;
    position : relative;
}

i actually want the contentBack(thick black border) div to be inside of the master div(grey background).

i dont want the contentBack to be relative because i want the menu to overlap the contentBack instead of pushing it to the right when menu appeared.

is there any other solution on this?

p/s : should i copy and paste the whole jsfiddle thing to this question?

Upvotes: 0

Views: 88

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need to add right: 0 or some value to your .contentBack

demo

Then you can use overflow: hidden to your .masterDiv

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105853

is this closer to what you are looking for ? http://jsfiddle.net/mBMq3/8/ or even http://jsfiddle.net/mBMq3/10/ ? no height to .masterDiv and .contentBack kept in the flow.

.masterDiv{
    background-color: grey;
    border: solid 1px;
    width: 80%;
    margin-top: 60px;
    text-align: center;
    padding : 10px;
    position : relative;
}
.menuDiv{
    position: absolute;
    z-index: 100;
    background-color: white;
    border: solid 1px;
    width: 200px;
    height: 300px;
    float: left;
}
.menuDiv li{
    text-decoration: none;
}
.menuButton{
    margin-top :-40px;
    position: relative;
    z-index: 100;
    width : 100px;
    height : 40px;
    float: left;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);

    -moz-transform-origin :bottom left;
    -o-transform-origin :bottom left;
    -webkit-transform-origin :bottom left;

}
.contentBack{   
    width : 300px;
    border : solid 30px;
    position :;

}
.contentBackPadding{
    padding-left: 50px;

}

Upvotes: 2

Related Questions