html - Keep ratio of a div after resize, with overflow image-content in it -

html - Keep ratio of a div after resize, with overflow image-content in it -

on website, when click on 1 of projects, lightbox opens, in middle, container div containing 2 divs. 1 on top several pictures of project in it, , underneath, text in white div, reaching bottom of page if it's not full.

html organisation:

<div id="project_container"> <div id="project_large12" class="project_large"> <p> pictures vertical scrolling</p> </div> <div id="project_text"> <p class="project_description12"> project description text </p> </div> </div>

(in real code, there several 'project_largexx' divs , 'project_descriptionxx' divs respectively hide js code.)

and bit of css dealing :

#project_container { position : fixed; top : 0; left: 50%; margin-left: -30%; margin-top: 5%; width : 57.45%; height : 64.5%; background-color : #fff000 } .project_large { position : absolute; width: 100%; line-height : 1.2; overflow : auto; height : 616px; } #project_text { position : fixed; width: calc(57.2% - 40px); padding : 20px; height: 100%; text-align : justify; margin-top : 33%; background-color : whitesmoke; } #project_text p { margin : auto; font-family : 'dosis', sans-serif; font-size : 1.2em; text-align : justify; bottom: 0; line-height: 1; }

what need do, manage maintain ratio of div containing images in overflow whatever width or height of window is.

here piece of code running thing.

what i'm desperately trying yellowish div maintain defined ratio -> 1 of first picture, or close it, letting bit of sec image appear. if alter 'result' window's width or height on jsfiddle can see yellowish div connect top of project description div in cases. overflow of pictures, resizing or having different resolution makes image div grow underneath project description div, , thus, screws scolling...

my website if want check : www.vincentleroux.fr

i'm reaching 1 more time limits of basic knowledge in coding. know code dirty, let's filthy, maybe there's solution in way arrange divs in html.

what i'm desperately trying yellowish div maintain defined ratio -> 1 of first picture, or close it, letting bit of sec image appear.

if i'm understanding correctly, should able accomplish setting min height/width:

min-width: xxpx; min-height: xxpx;

with this, div won't go smaller min-size set, regardless of how little window gets. if window gets little div, add together scroll bars.

you may want set min-height/width on container element, should allow both divs scale accordingly. if want yellowish div maintain scale, add together these properties under class.

hope helps!

html css