hi to all I have a round boxes using div, Inside this div there is an picture image which doesn't have a fix size fot both height and with. I want to put on the left and right side of another image such as left_anim.gif and right_anim.gif . But I want to center vertically this gif. If the picture image have a fix size I can center it vertically but it will varies depend on the size of the pictures, How can I achive this. any suggestions would greatly appreciated thanks in advance Tirso here is the sample link http://www.tirso.webberzsoft.com/mypicturecards_individual_others.php here is the code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Example - How to create rounded corner boxes using CSS</title> <link type="text/css" rel="stylesheet" href="css/css.css" /> </head> <body> <div id="formdiv"> <div id="picturecards_individual"> <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr"> <div id="buttons"> <div class="cont"> <div class="frame" id="frameimage"> <div style="float:left; vertical-align: middle"><img src="images/left_anim.gif" /></div><img src="picturecards/individual/DSCF0011.JPG"/></div> </div> </div> <div style="clear:both"></div> </div></div></div></div></div></div></div></div> <!--end of rounded box--> </div> </div> </body> </html> Code (markup):
Hi tirso, I think I'm able to put you in the right direction.. I'll try helping you with a bit of javascript. First, change a bit of your coding as follows. Put left_anim.gif and your picture in a different div with id's, like this: <div id="left_anim" style="float: left;"><img src="images/left_anim.gif" /></div> <div id="picture" style="float: left;"><img src="picturecards/individual/DSCF0011.JPG"/></div> Code (markup): Then, add a javascript at the very bottom of your body section: <script type="text/javascript"> //Get elements var pic = document.getElementById('picture'); var anim_left = document.getElementById('left_anim'); //Get heights var pic_height = pic.offsetHeight; var left_anim_height = anim_left.offsetHeight; //Make sure both div's have same height //The smallest one enlarges to the size of the bigger one //Note: Same as if & else construction, other typo pic_height > left_anim_height ? left_anim_height.style.height = pic_height + "px" : pic_height.style.height = left_anim_height + "px"; //Get new heights var pic_h = pic.offsetHeight; var left_anim_h = anim_left.offsetHeight; //Calcute anim picture position var center = pic_h/2; var anim_left_top = center - (left_anim_h/2) //Set div style left_anim.style.marginTop = anim_left_top + "px"; } </script> Code (markup): I advise you to put the javascript code in a seperate .js file, without the script tags ofcourse. Then refer to it (at the very end of body section) as: <script type="text/javascript" src="pathToScript/scriptName.js"></script> Code (markup): I've got something similar implemented on my site, which works for me