Having an issue with some code attempting to get a table (3x3) to align on the left side and align an image on the right side.

I can switch the code and get the image to align the image on the left and the table on the right, however this isn't what is wanted.

Hopefully someone here will spot something I might have missed.

The code below works for desktops, however tested on multiple laptops localy and the site completely goes haywire in this section of code. If I change it back to image on left; table on the right. It loads without problems on both. If I alternate it it gives me issues on laptops. The code doesnt disply correctly only on laptops. All other browsers and/or desktops work just fine.

Table on the right Image on left

<div align="left">
        <br /><a href="#"><img src="images/javatool.jpg" width="302" height="328" vspace="1" align="right" /></a><br />
<table>

Image on right table on left

 
  <div align="right"><div class="float">
        <br /><a href="#"><img src="http://www.webmaster-talk.com/images/javatool.jpg" width="302" height="310" vspace="1" align="right" /></a><br /></div>
<div align="left">
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('t1','','images/newsover.gif',1)"><img src="http://www.webmaster-talk.com/images/news.gif" alt="" width="287" height="139" id="t1" /></a></li></td>
<td><img src="http://www.webmaster-talk.com/images/tail-bottom.gif" width="2" height="157" /></td>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('t2','','images/customerover.gif',1)"><img src="http://www.webmaster-talk.com/images/customer.gif" alt="" width="287" height="139" id="t2" /></a></li></td>
</tr>
<tr>
<td><div class="line-hor"></div></td>
<td><div class="line-hor"></div></td>
<td><div class="line-hor"></div></td>
</tr>
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('t3','','images/activepriorover.gif',1)"><img src="http://www.webmaster-talk.com/images/activeprior.gif" alt="" width="287" height="139" id="t3" /></a></li></td>
<td><img src="http://www.webmaster-talk.com/images/tail-bottom.gif" width="2" height="157" /></td>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('t4','','images/industriesover.gif',1)"><img src="http://www.webmaster-talk.com/images/industries.gif" alt="" width="287" height="139" id="t4" /></a></li></td>
</tr>
<tr>
</tr>
</table>
</div>

CSS Layout:

#main {width:960px; margin:0 auto;}
#header {height:509px;}
#header, #content, #footer { font-size:0.814em;}
.col-1, .col-2, .col-3, .col-4, .col-5 { float:left;}
/*======= index.html =======*/
#page1 #content .row-1 .col-1 {width:250px;}
#page1 #content .row-1 .col-2 { width:250px;}
#page1 #content .row-1 .col-3 { width:250px;}
#page1 #content .row-1 .col-4 { width:210px;}
#page1 #content .row-2 .col-1 {width:228px; margin-right:16px;}
#page1 #content .row-2 .col-2 { width:228px; margin-right:16px;}
#page1 #content .row-2 .col-3 { width:228px; margin-right:16px;}
#page1 #content .row-2 .col-4 { width:228px;}
#page1 #content .box1 .col-1 {
 width:87px;
 margin-right:48px;
}
#page1 #content .box1 .col-2 {
 width:123px;
 margin-right:58px;
}
#page1 #content .box1 .col-3 {
 width:175px;
 margin-right:48px;
}
#page1 #content .box1 .col-4 {
 width:121px;
 margin-right:1px;
}
#page1 #content .box1 .col-5 { width:96px;}
 
/*=========================*/
 
#footer {height:10px;}

CSS Style:

* {
 padding:0;
 margin: 0;
}
body { background:#f4f4f4; font-family:Arial, Helvetica, sans-serif; font-size:100%; line-height:1em; color:#a4a4a8; min-width:960px;}
input, textarea, select { font-family:Arial, Helvetica, sans-serif; font-size:1em;}
object { vertical-align:top; outline:none;}
.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}
.alignright { text-align:right;}
.aligncenter { text-align:center;}
.wrapper {
 width:100%;
 overflow:auto;
}
.container { width:100%;}
p { margin:0; padding:0;}
.tail-top { background:#fff; border-top:3px solid #f7ebb4;}
.tail-bottom { background:url(images/tail-bottom.gif) left bottom repeat-x;}
 
/*==================forms====================*/
input, select { vertical-align:middle; font-weight:normal;}
img {
 border:0;
 vertical-align:top;
 text-align:left;
 color: #000;
}
#form { padding:6px 0 0 15px; width:176px;}
#form .form { height:32px;}
#form input {width:170px; padding:3px 0 3px 3px; background:#fff; border:1px solid #bfbfbf; color:#a4a4a8; font-size:.92em;}
#form textarea { width:170px; height:278px; overflow:auto; background:#fff; border:1px solid #bfbfbf; padding:3px 0 0 3px; color:#a4a4a8; font-size:.92em; margin-bottom:10px;}
 
/*==================list====================*/
ul { list-style:none;}
.list { padding-bottom:43px;}
.list li { float:left; border-right:1px solid #e8e8e8;}
.list li.last { border:0;}
.list1 li { line-height:1.5em; font-size:.92em;}
.list1 li a { text-decoration:none;}
.list1 li a:hover { text-decoration:underline;}
.list2 { padding-top:4px;}
.list2 li { padding:0 0 2px 22px;}
.list2 li.m1 { background:url(images/twitter.gif) no-repeat left top;}
.list2 li.m2 { background:url(images/delicious.gif) no-repeat left top;}
.list2 li.m3 { background:url(images/stumbleupon.gif) no-repeat left top;}
.list2 li.m4 { background:url(images/facebook.gif) no-repeat left top;}
.list2 li a { color:#a4a4a8; text-decoration:none;}
.list2 li a:hover { text-decoration:underline;}
.list3 li { padding-left:25px; background:url(images/marker.gif) no-repeat left 2px; line-height:1.69em;}
.list3 li a { text-decoration:none;}
.list3 li a:hover { text-decoration:underline;}
.list4 { margin-top:-18px;}
.list4 li { padding-top:18px; width:100%; overflow:hidden; vertical-align:top;}
.list4 li cite { font-style:normal;}
.list4 li span { display:block; text-align:right; color:#ed8b00;}
.list5 { margin-top:-6px;}
.list5 li { width:100%; overflow:hidden; vertical-align:top; padding-top:6px;}
.list5 li strong { display:block; background:url(images/line-hor.gif) repeat-x 0 12px; overflow:hidden;}
.list5 li a { float:left; text-decoration:none;}
.list5 li a:hover {
 text-decoration:underline;
 font-weight: bold;
}
.list5 li span { float:right;}
.list6 { margin-top:-30px;}
.list6 li { padding-top:30px;}
.list6 li p a { color:#ed8b00;}
 
/*==================other====================*/
.img-box p { padding:25px 13px 10px 14px;}
.img-box p a,
.img-box p span a { 
 color:#ed8b00;
}
.img-box p span { display:block; color:#232325;}
.img-box p span a { text-transform:uppercase; font-size:.92em; font-style:italic;}
.img-box1 { width:100%; overflow:hidden; padding-top:5px;}
.img-box1 img {
 float:left;
 margin-top: -5px;
 margin-right: 20px;
 margin-bottom: 0;
 margin-left: 0;
}
.img-box2 p { padding:25px 13px 10px 14px;}
.img-box3 { width:100%; overflow:hidden; padding-top:5px;}
.img-box3 img {
 float:right;
 margin-top: -5px;
 margin-right: 20px;
 margin-bottom: 0;
 margin-left: 0;
}
.p1 { margin-bottom:20px;}
.phone { float:right; margin-right:6px;}
 
/*==================txt, links, lines, titles====================*/
a {color:#a4a4a8; outline:none;}
a:hover{text-decoration:none;}
h4 { color:#404042; text-transform:uppercase; font-size:.85em; margin-bottom:6px;}
h5 { color:#ed8b00; font-size:.92em; font-style:italic; font-weight:normal; text-transform:uppercase; margin-bottom:5px;}
h5 a { color:#ed8b00;}
.line-hor {
 border-bottom:1px solid #d1d1d1;
 overflow:hidden;
 font-size:0;
 line-height:0;
 color: #000;
 margin-top: 3px;
 margin-right: 0;
 margin-bottom: 3px;
 margin-left: 0;
}
.title { margin:0 0 10px -10px; border-bottom:1px solid #d1d1d1; padding:0 0 5px 12px;}
.title1 { margin-bottom:10px; border-bottom:1px solid #d1d1d1; padding-bottom:5px;}
.title2 { margin-bottom:16px; border-bottom:1px solid #d1d1d1; padding:0 0 5px 12px; position:relative; overflow:hidden;}
.title2 span { position:absolute; right:0; top:5px; font-size:1.08em; font-style:italic;}
.title2 a { color:#232325; padding-right:20px; background:url(images/marker.gif) no-repeat right top; text-decoration:none;}
.title2 a:hover { text-decoration:underline;}
 
/*==================boxes====================*/
.box { background:#f6f6f6; width:100%;}
.box .border-top {background:url(images/border.gif) repeat-x left top;}
.box .border-bot {background:url(images/border.gif) repeat-x left bottom;}
.box .border-left {background:url(images/border.gif) repeat-y left top; width:100%;}
.box .border-right {background:url(images/border.gif) repeat-y right top;}
.box .inner { padding:15px 9px 20px 12px;}
.box .extra { display:none; padding:12px 0 0 13px;}
.box .extra p { color:#fff; margin-bottom:15px;} 
.box .extra p a { font-style:italic; text-transform:uppercase; font-size:.92em;}
.box .extra span,
.box .extra a { 
 color:#000;
}
.box.visible .extra { display:block;}
.box.visible .img-box { display:none;}
.box.visible { background:#e8c31a;}
.box.visible .border-top { background:none;}
.box.visible .border-bot { background:none;}
.box.visible .border-left { background:none;}
.box.visible .border-right { background:none;}
.box1 { width:100%; border-top:3px solid #191919;}
.box1 .inner { padding:30px 41px 0 27px;}
 
/*header*/
#header .row-1 { border-bottom:3px solid #191919; height:113px;}
#header .row-1 .fleft { padding:23px 0 0 7px;}
#header .row-1 .fright ul li { float:left; padding-left:12px;}
#header .row-2 {
 height:160px;
 text-align: right;
 vertical-align: top;
 width: 960px;
 float: right;
 background-image: url(images/header-bgx3.jpg);
 background-repeat: no-repeat;
 background-position: 0 3px;
 border-bottom-width: 3px;
 border-bottom-style: solid;
 border-bottom-color: #d1d1d1;
}
 
/*content*/
#content { padding:5px 0 32px 0;}
#content .indent { padding-left:12px;}
#content .indent1 { padding-right:48px;}
#content .indent2 { padding-bottom:59px;}
#content .indent3 { padding-bottom:37px;}
#content .indent4 { padding:0 12px 37px 10px;}
#content p,
#content cite { 
 line-height:1.38em;
}
/*footer*/
#footer p {
 font-size:0.92em;
 color:D6D6D6;
 padding-top:12px;
 text-decoration: none;
}
#footer p a {
 color:D6D6D6;
 text-decoration: none;
}
/*float*/
div.float { float: left;}
div.float p { text-align: center;}
.centerdiv { margin-left: auto; margin-right: auto;}
 
/*==========================================*/

Thanks for any help you might be able to provide.
Been racking my brain on this and searching the net for anything that might help.

Get rid of the <div align=xxxx> and just FLOAT the divs and then float the image.
Why are you using tables for this layout anyway?

Well first let me start by saying thank you for a reply and your time to help.

Well I tried a number of different methods to attempt to get the look they are looking for. example: 2 boxes above and 2 boxes below one another with a line breaking them horizontal and vertically. With an image on the right side. Using pre existing code and calling on a number of different files, it wouldnt do what I needed it to do.

The page would error in a number of ways attempting the columns, table, float, align, etc. And after spending a number of hours on it. I finally found a solution online that worked and so I went with what worked for the layout. This is the reason for the table.

I actually did that as well, I floated both. And changed the css to example: div.float2 with an alignment right for the image, as the default float is set to an alignment left. It still doesn’t display properly on 3 laptops, however it shows up perfectly on all desktops.

If you like I can send you links to the site to see what’s occurring just let me know and Ill upload different examples to my server. I’m 100% trumped at this point as to why the laptop would show the site any differently than the desktop. The only thing I could come up with was to look for some sort of detection script and force it to look/display a bit differently but correctly for laptops/portable devices.
-JB

If you like I can send you links to the site to see what’s occurring

That would help

I do not see anything wrong, however, having the link to your website to see the complete source code "live" might show something else.

Sending the both of you a pm right now.