div's dropping down when page is re-sized or zoom-in

i am making a template site which should be in that order:

left img | center | right img

when the browser in in 100% mode its look ok
but when zooming in the center goes below the image
i tried to fixed it and searched the web for the answer but with no luck

my goal is when the user zoom in or re-size the page, the page will only shrink
and wont effect the img or other elements in the page...
this is the html:

(cant manage to publish here the html.. how am i suppose to write it not within html tags?)

this is the css(contains unnecessary things also as i tried things)

body
{
direction: rtl;
background: url(../images/site_background.jpg);
width: 100%;
}

#wrapper
{
width: 910px;
margin: auto;
margin-top: -8px;
display: block;
position: relative;
}

#logo_img {
margin-top: 8px;
}
#nav
{
padding: 0;
margin: 0px 0 0px 0;
display: block;
overflow: hidden;
background: #2e2e2e url(../images/nav_bar.jpg) repeat-x;
list-style: none;
font-size: large;
height: 39px;
width: 909px;
}

#nav li
{
display: inline;
}

#nav li a
{
padding: 10px 20px;
float: right;
display: block;
color: white;
text-decoration: none;
}

#nav li a:hover
{
background: #1b1b1b url(../images/nav_bar.jpg);
}

#table_footer
{
margin: 0 auto;
}

#footer td
{
font-size: 12px;
border-left: 0.05cm solid #b3b2b2;
padding-right: 10px;
padding-left: 10px;
}

#footer a
{
color: #363535;
border-spacing: 2px;
text-decoration: none;
}
#footer #last_footer_link
{
border-left: none;
}

#right_ad
{
margin-right: 214px;
margin-top: 386px;
float: right;
}

#left_ad
{
margin-left: 214px;
margin-top: 386px;
float: left;
}

any help will be appreciate ...
Thanks a lot in advanced