CSS parent height in percentage for absolute positioned children in responsive web design -
i'am working on responsive design , i'm quite stuck:
i need set image-type children position absolute in div parent, , keep lower section under parent. actually, solution have set fixed height parent (in case, relative margin lower section wouldn't work in dynamic structure). problem images, set max-width: 100%; keep dimensions flexible, expand page, , lower section no more positioned on resize:
<div id='page'> <div id='b0'><img /><img /></div> <section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section> </div>
and css:
#page{max-width:1024px; margin: 0 auto;} #b0{position: relative; height:25%;}/* doesn't work, 100px instead work responsive design fails */ #b0 img{position: absolute;}
does have solution ?
thank's in advance
simplier solution :
consists in setting each image position: absolute; except last 1 :
#b0 img:last-child{position: relative;
keeping element in "flood" provides parent needed height value.
Comments
Post a Comment