I have been battling with a layout issue for some hours now, and am wondering if anyone has any input on a better solution or a better way.
The designer is very into slicing and images and tables, and I am trying to encourage him to redo the site all in CSS.
Here is the link to the page I am working up.

http://contentx.com/site02/subpage01.html

Here is a more simple version of above: (no header)
http://contentx.com/site02/test.html

You will notice that when you zoom up the text, it does not wrap around the image (second column) I am floating the images (both columns) yet the text wants to drop below the images. I have two container divs, both left and right, and then sub container images for each block of text and image. I cannot get the text to wrap correctly and am feeling I am building this more complicated that it has to be.
Here is the CSS code that makes up the left and right container columns.
(I took out all margins trying to figure out some issues)

I feel like I am over coding!! Help!
CSSonly the subcontainers)
/* sub left container */

#sub_lt_containter {
background-color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 513px;
float: left;
text-align: right;
}
#sub_lt_containter img {
margin-top: 0px;
margin-right: 0px;
}
#sub_lt_containter h1 {
margin-top: 0px;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size: 18px;
font-weight:bold;
}
#sub_lt_containter h2 {
margin-top: 0px;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#0000CC;
font-size: 14px;
font-weight:bold;
}
#sub_lt_containter p {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
font-size: 12px;
}
#sub_lt_containter a:link { color: #9d6829;}
#sub_lt_containter a:visited { color: #ee3322;}
#sub_lt_containter a:hover { color: #24c3ff;}
#sub_lt_containter a:active { color: #FFFFFF;}

#sub_box_left {
width:350px;
margin:0px;
float: right;
}
#sub_box_left img {
float: right;
padding-left:0px;
}
#sub_box_left p {
margin-top: 20px;
margin-right: 80px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
font-size: 12px;
text-align: right;
float: left;
}
/* sub right container */

#sub_rt_containter {
background-color: #000000;
margin:0px;
padding: 0px;
width: 513px;
float: right;
text-align: right;
}
#sub_rt_containter img {
margin-top: 0px;
margin-right: 0px;
}
#sub_rt_containter h1 {
margin-top: 0px;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size: 18px;
font-weight:bold;
}
#sub_rt_containter h2 {
margin-top: 0px;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#0000CC;
font-size: 14px;
font-weight:bold;
}
#sub_rt_containter p {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
font-size: 12px;
}
#sub_rt_containter a:link { color: #9d6829;}
#sub_rt_containter a:visited { color: #ee3322;}
#sub_rt_containter a:hover { color: #24c3ff;}
#sub_rt_containter a:active { color: #FFFFFF;}

#sub_box_right {
background-color:#000000;
width:350px;
margin:0px;
float: left;
}
#sub_box_right img {
float: left;
padding-bottom:0px;
}
#sub_box_right p {
margin-top: 20px;
margin-right: 0px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
font-size: 12px;
text-align: left;
float: right;
}