Stretch div as much as possible within a table cell

imran1478

New Member
I am currently working on a personal website which will contain pictures. I wanted to create a frame for those pictrues, so I sliced a photo of the frame into pieces and made each piece a div, since I want a certain part of the frame pic to stretch but not the edges, f.e. Here's my table:\[code\]<table> <tr> <td height="93px" width="93px"><div id="photo_corner_topleft"></div></td> <td height="93px"><div id="photo_beggining_top"></div><div id="photo_side_top"></div><div id="photo_ending_top"></div></td> <td height="93px" width="93px"><div id="photo_corner_topright"></div></td> </tr> <tr> <td width="93px"><div id="photo_beggining_left"></div><div id="photo_side_left"></div><div id="photo_ending_left"></div></td> <td> <div id="photo_content" align="center"><!-- HERE goes the photo. --> </div> </td> <td width="93px"><div id="photo_beggining_right"></div><div id="photo_side_right"></div> <div id="photo_ending_right"></div></td> </tr> <tr> <td height="93px" width="93px"><div id="photo_corner_bottomleft"></div></td> <td><div id="photo_beggining_bottom"></div><div id="photo_side_bottom"></div><div id="photo_ending_bottom"></div></td> <td height="93px" width="93px"><div id="photo_corner_bottomright"></div></td> </tr></table>\[/code\]So, I want the divs "photo_side_whatever" to be as long as possible without pushing the "ending" and "beggining" divs out. I have checked other questions but I still haven't managed to make it. Here is my div:\[code\]#photo_side_left { min-height: 224px; width: 93px; height: auto; background-image: url(img/dynamic_frame/frame_09.png); background-position: center; background-repeat: no-repeat; background-size: contain;}\[/code\]Thanks in advance for your help :)
 
Back
Top