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

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -