mejdawdkrg
New Member
Following is the excerpt from my html page.\[code\]<div id="main_container"> <div id="sec_inform" > <h1 class='inf_head'>Some heading goes here</h1> <div class='inf_desc'>And here goes the description. Two Liner description actually. </div> </div> <div id="sec_pic" > <img class='prd_logo' src="https://src.com/abc.png" /> </div> </div>\[/code\]After styling it looks fine. ( See here: http://jsbin.com/orucel/1 )Now, what I want is if \[code\].inf_desc\[/code\] contains huge text then : [*]\[code\].inf_head\[/code\] should move to top ( If you see the code, I have used padding-top for \[code\]sec_inform\[/code\], so it should somehow change the padding-top to 0 . [May be there is some other property which does the same thing ] )[*]Another desired thing, but not important, if \[code\].inf_desc\[/code\] contains really too much text then \[code\].inf_desc\[/code\] should grow and eventually \[code\]#sec_inform\[/code\] and \[code\]#main_container\[/code\] too should grow.How can I do this?If at all jQuery is required then I am okay with that, but I will prefer some CSS only solution.