jjznoh1993
New Member
The wrapper container css is width:auto; max-height:70%;I want the divs to maintain their aspect ratio when browser window height changes.jfiddle: http://jsfiddle.net/7JNuU/HTML\[code\]<div id="feedwrapper"><!--FULL group--><div id="tile"><div id="fullcell">1</div></div><!--FULL group--><!--4up group--><div id="tile"><div id="solocell">1</div><div id="solocell">2</div><div id="solocell">3</div><div id="solocell">4</div></div><!--4up group--><!--2top group--><div id="tile"><div id="solocell">1</div><div id="solocell">2</div><div id="cell2xbot">3</div></div><!--2top group-->\[/code\]CSS\[code\]#feedwrapper{width:auto;max-height:70%;top:80px;bottom:60px;margin-bottom:80px;left:300px;position:absolute;background-color:#FFF;white-space:nowrap;display:block;}#tile{ position:relative; border:none; padding:0px; min-width:640px; height:100%; margin:0px 2px 2px 0px; background-color:#CC6; float:left;}#fullcell{width:100%; height:100%; background-color:#F99; display:block;}#solocell{ width:50%; height:50%; background-color:#36C; display:block; float:left;}#cell2xbot{ width:100%; height:50%; background-color:#C93; display:block; float:left;}#cell2xtop{ width:100%; height:50%; background-color:#C66; display:block; float:left;}#cell2yleft{ width:50%; height:100%; background-color:#99C; display:block; float:left;}#cell2yright{ width:50%; height:100%; background-color:#FC6; display:block; float:right;}\[/code\]The page I'm working on is: http://www.jordache.com/connect.phpThe grid uses squares and rectangles.50%x50% squares, 100% squares, 50%x/100%y rect, and 100%x/50%y rect.There must be a simpler way.... grrrrr... help!