Hallow, I am learning responsive designing. I made a banner with image and on the banner div I put a caption div. The position of banner div is relative and the position of caption div is absolute. Now the the problem is :-I set all images’ max-width as 100%, height as auto. and I set the max-height of caption div as 100% too. I Want the width of caption div and and banner div will be same..but my caption div is not spreading. I am typing my code below: **<div id="bannerPic"><img src="//www.xarj.net/wp-content/uploads/2008/07/royalty-free.jpg"/>
<div id="caption">Lorem ipsum dolor</div>
</div>
bannerPic{
position:relative; }
caption{
font:normal 35px/58px “tahoma”, trebuchet MS; text-align:center; position:absolute; max-width:100%; height:58px; top:217px; left:10px; background:#3f78cc; opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ left: 0px; } img{ max-width:100%; height:auto; padding:0; margin:0; border:none; }**
