Div is not fixed according to my choice?

I am creating basic html page and i have one main container div and it contains one header div that is fixed at the top and working fine. and next to header, i have animation div, images div and next to images I have one description div and i have divided the description div into two div. div1{float:left} and div2{float left}... Now when i open the page and scroll down to reach the div 1 and div2. I want that div2 should be fixed under the header when it reaches to the header bottom... Is it possible to solve with simple css or javascript or something else required. if possible with css then how to proceed