After generating the HTML on my ASP.NET page, everything looks good initially. However, I noticed that when I adjust the screen resolution or reduce the browser size, the image in the logoplace div starts to overlap. It appears to be an issue with absolute positioning within the companyviewdiv.
<div id="content">
<div class="main">
<table>
<tr>
<td valign="top" class="Mid_row">
<div class="indent">
<div class="logoPlace">
<img width="200" height="172" border="0" src="images/aldagi.jpg">
</div>
<div class="comapanyView">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td colspan="2">
<h1>heading</h1>
</td>
</tr></tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
Below are the relevant CSS classes:
.main {
margin: 0 auto;
max-width: 1200px;
min-width: 997px;
padding-left: 6px;
text-align: left;
}
#content {
background: url(/images/bg.gif) top left repeat-x #fff;
overflow: hidden;
padding-bottom: 20px;
}
.Mid_row {
padding-right: 15px;
}
#content .indent {
padding: 15px 0 0;
}
.logoPlace {
margin-right: 20px;
margin-top: 50px;
position: absolute;
right: 0;
width: 15%;
}
.comapanyView {
position: relative;
width: 80%;
}