javascript - how to make responsive a div holding 2 divs in the right and left with image depending on screen size -

supposing have div holds 2 divs,

is there way make responsive depending on screen size? want apply mobile version getting messed up...

<div id="primary"> <div id="left"><div id="object1" align='justify'> <br/><br/> <p> if told me computer generated image of mothership hovering on planet's surface, have believed you. instead, had desmids, turned out form of green algae. have guessed cell in process of dividing, turns out 1 of characteristic features of desmids they're single cell divided 2 compartments. (see, i'm learning this.) desmids tiny image taken @ 100x power. green backdrop? it's moss. </p> </div></div>  <div id="right"><div id="object3"> <b><h2>title</h2></b> <img class="align-right" alt="" src="http://cdn.arstechnica.net/wp-content/uploads/2012/10/09_place_22047_3_drange.jpg"  style="width:200px" /></div></div></div>    

the image , div not know how reduce depending on screen size...

please teake at jsfiddle in fact cannot make div hold 2 columns image under , not @ same level of left column...

for have percentage padding , margin also, apply maths...

leftdiv(padding:1% + margin:1% + width:44%) + rightdiv(padding:1% + margin:1% + width:44%) = 100%

padding , margin top,bottom,left, right 1%,1%,1%,1%...

css:-

#left, #right {     margin: 1%;     padding: 2%;     width: 43%; } 

if want image responsive make width:100%;

http://jsfiddle.net/fgnpl/5/