CODEWITHSUNDEEP
css
Mona Coder
Mona Coder

Reputation: 6316

Cant' Position Caption Div Appropriately

Can you please take a look at JSfiddle and let me know how I can position the div with .caption at the bottom of the div with class .wrapper.

I already tried to add position:absolute; bottom:5px; rules to .caption but it positioned the caption div out of the .wrapper !

<div class="wrapper">
 <div class="caption">Test</div>
 <div class="main"></div>
</div>

here is the css rules

.wrapper{
height:300px;
width:300px;
background-color:yellow;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
}

Upvotes: 0

Views: 54

Answers (3)

jerrylow
jerrylow

Reputation: 2629

The position: absolute should work but you'll need to set .wrapper as:

.wrapper {
   position: relative;
}

Demo here: http://jsfiddle.net/sBxP2/4/

Upvotes: 2

user2477139
user2477139

Reputation: 606

you can update your css like this http://jsfiddle.net/shall1987/MwJsG/

.wrapper{
    height:300px;
    width:300px;
    background-color:yellow;
    position:relative;
}
.main{
    height:100%;
    width:100%;

}
.caption{
    height:10%;
    width:100%;
   background: rgb(0, 0, 0) ; opacity: 0.7;
    margin-bottom:5px;
    color:white;
    position:absolute;
    bottom:0;
}

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/shall1987/MwJsG/

CSS

.wrapper{
    height:300px;
    width:300px;
    background-color:yellow;
    position: relative;
}
.main{
    height:100%;
    width:100%;

}
.caption{
    height:10%;
    width:100%;
   background: rgb(0, 0, 0) ; opacity: 0.7;>
    margin-bottom:5px;
    color:white;
    position: absolute;    
    bottom: 0;
}

Upvotes: 0

Related Questions