I am trying to create a layout with an image wrapped around a form table. However I cannot get the right image to align with the header. I would appreciate any help or suggestions on how to fix this.
Here is the screen shot:
Here's the code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /
padding: 0;
text-align: center;
color: #000000;
}
.thrColFix #container {
width: 576px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.thrColFix #sidebar1 {
float: left;
width: 150px; /
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
.thrColFix #sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
.thrColFix #mainContent {
margin: 0 200px;
padding: 0 10px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
.thrColFix #sidebar1 { width: 180px; }
.thrColFix #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFix #sidebar2, .thrColFix #sidebar1 { padding-top: 30px; }
.thrColFix #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="thrColFix">
<div id="container">
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<img src="images/Shure-Header.jpg" width="576" height="406" /><br class="clearfloat" />
<form method="post" action="mailto:stephaniep@sfma.ca">
<table width="359" cellpadding="5" bo >
<tr>
<td width="200">Shure headphones model number</td>
<td width="147">
<input type="text" name="Modelname" size="20">
</td>
</tr>
<tr>
<td height="33"><p>First name</p></td>
<td><input type="text" name="Firstname" size="20"></td>
</tr>
<tr>
<td height="33">Last name</td>
<td><input type="text" name="Lastname" size="20"></td>
</tr>
<tr>
<td height="33">E-mail address</td>
<td><input type="text" name="Email" size="20"></td>
</tr>
<tr>
<td height="33">Studio/Company name</td>
<td><input type="text" name="Company/sStudio" size="20"></td>
</tr>
</table>
<img src="images/Shure-Right-.jpg" width="208" height="412" align="right" />
<div align="top"></div>
<table width="358" >
<tr>
<td>Briefly indicate your experience with your SHR headphones:</td>
</tr>
<td><input type="text" name="Opinion" size="50" height="60"> </td>
</table>
<p><input type="Submit" value="Submit" name="b1"></p>
</form>