Need help with CSS layout table

jacobs · Joined: 09 Nov 2005 Posts: 1 Location: Singapore

Hello, I am new to css and now I am using dreamweavers css page three column layout. The problem that occurs is that when I minimize the browser window, pictures in the middle and text are moving to the left and blocking the first table. Please help me out with this. Below are the html and css code. I really appreciate your help. Thank you in advance.

/* CSS Document */

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px;
background-image: url(picture/bg.jpg);
}
/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
width: 100%;
background-color: #00349A;
}
#masthead2{
padding: 0px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
width: 1003px;
background-color: #FFFFCC;
height: auto;
}
#navBar{
float: right;
width: 24%;
margin: 0px;
padding: 0px;
border-left: 0 px solid #cccccc;
border-bottom: 0 px solid #cccccc;
padding-left: 0px;
}

#headlines{
float:left;
width: 23%;
border-right: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
padding-right: 0px;
height: 100%;
}

#content{
float: none;
width: 52%;
font-style: normal;
font-size: 14px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

Below are the html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Worldwide Investigator & Protection</title>
<link href="wip2" rel="stylesheet" type="text/css">
<link href="wip.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
<script language="JavaScript1.2" type="text/javascript" src="button/mm_css_menu.js"></script>
<script type="text/JavaScript">

</script>
</head>

<body>
<table width="40%" border="0" cellpadding="0" cellspacing="0" id="masthead">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1000" height="150">
<param name="movie" value="flash/upper_logo.swf">
<param name="quality" value="high">
<embed src="flash/upper_logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="150"></embed>
</object></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="masthead2">
<tr>
<td width="227" height="26"> </td>
<td><div id="FWTableContainer330034001"> <img name="button_mid" src="button/button_mid.gif" width="650" height="20" border="0" id="button_mid" usemap="#m_button_mid" alt="" />
<map name="m_button_mid" id="m_button_mid">
<area shape="rect" coords="531,1,645,21" href="index.html" alt="" />
<area shape="rect" coords="400,0,530,20" href="javascript:;" alt="" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer1105132529_0', 'MMMenu1105132529_0',400,20,'button_mid');" />
<area shape="rect" coords="267,0,396,20" href="javascript:;" alt="" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer1105132454_1', 'MMMenu1105132454_1',267,20,'button_mid');" />
<area shape="rect" coords="136,0,265,20" href="javascript:;" alt="" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer1105132342_2', 'MMMenu1105132342_2',136,20,'button_mid');" />
<area shape="rect" coords="0,0,134,20" href="javascript:;" alt="" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer1105132252_3', 'MMMenu1105132252_3',0,20,'button_mid');" />
</map>
<div id="MMMenuContainer1105132529_0">
<div id="MMMenu1105132529_0" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();"> <a href="javascript:;" id="MMMenu1105132529_0_Item_0" class="MMMIFVStyleMMMenu1105132529_0" onMouseOver="MM_menuOverMenuItem('MMMenu1105132529_0');"> FAQ Page </a> </div>
</div>
<div id="MMMenuContainer1105132454_1">
<div id="MMMenu1105132454_1" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();"> <a href="contact.html" id="MMMenu1105132454_1_Item_0" class="MMMIFVStyleMMMenu1105132454_1" onMouseOver="MM_menuOverMenuItem('MMMenu1105132454_1');"> Contact us </a> </div>
</div>
<div id="MMMenuContainer1105132342_2">
<div id="MMMenu1105132342_2" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();"> <a href="spouse_check.html" id="MMMenu1105132342_2_Item_0" class="MMMIFVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Spouse Check </a> <a href="child_custody.html" id="MMMenu1105132342_2_Item_1" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Child Custody </a> <a href="phone_intelligence.html" id="MMMenu1105132342_2_Item_2" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Photo Intelligence </a> <a href="photo_video_evidence.html" id="MMMenu1105132342_2_Item_3" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Photo / Video Evidence </a> <a href="missing_person.html" id="MMMenu1105132342_2_Item_4" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Locate Missing Person </a> <a href="surveillance.html" id="MMMenu1105132342_2_Item_5" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Surveillance </a> <a href="employee_movement.html" id="MMMenu1105132342_2_Item_6" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Employee Movement </a> <a href="insurance_fraud.html" id="MMMenu1105132342_2_Item_7" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Insurance Fraud </a> <a href="cyber_internet.html" id="MMMenu1105132342_2_Item_8" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Cyber & Internet </a> <a href="overseas_assignment.html" id="MMMenu1105132342_2_Item_9" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Overseas Assignment </a> <a href="asset_financial_check.html" id="MMMenu1105132342_2_Item_10" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Asset Financial Check </a> <a href="child_behaviour.html" id="MMMenu1105132342_2_Item_11" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Child Behaviour </a> <a href="family_violence.html" id="MMMenu1105132342_2_Item_12" class="MMMIVStyleMMMenu1105132342_2" onMouseOver="MM_menuOverMenuItem('MMMenu1105132342_2');"> Family Violence </a> </div>
</div>
<div id="MMMenuContainer1105132252_3">
<div id="MMMenu1105132252_3" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();"> <a href="profile.html" id="MMMenu1105132252_3_Item_0" class="MMMIFVStyleMMMenu1105132252_3" onMouseOver="MM_menuOverMenuItem('MMMenu1105132252_3');"> About us </a> </div>
</div>
</div></td>
</tr>
</table>
<table width="28%" height="100%" border="0" cellpadding="0" cellspacing="0" id="headlines">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><div align="center"></div></td>
</tr>
<tr>
<td><img src="picture/image-filler-left.jpg" width="222" height="50"></td>
</tr>

<tr>
<td> </td>
</tr>
</table>
<table width="40%" height="172" border="0" cellpadding="0" cellspacing="0" id="navBar">
<tr>
<td><p align="left" class="style9"> </p> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<div id="Layer1">
<table width="101%" height="91" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75"><label></label></td>
<td width="163"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label></label></td>
<td> </td>
</tr>
<tr>
<td colspan="2" class="style9"><form name="form1" method="post" action="db1.php">
<p>
<span class="style11">Username</span>
<input name="loginUsername" type="text" size="15">
</p>
<p>
<span class="style11">Password</span>
<input name="loginPassword" type="password" size="15">
</p>
<p>
<input type="submit" name="ok" value="Log in">
</p>
<p>  </p>
</form> </td>
</tr>
</table>
</div>
<table width="59%" border="0" cellpadding="0" cellspacing="0" id="content">

<tr>
<td colspan="2"><img src="picture/mid_index.jpg" width="500" height="100"></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>

<tr>
<td width="97%"><div align="justify"><strong>Worldwide Investigation Network</strong><br>
The founding member, Jason JP, an ex-police officer and his spouse Mrs. Jas JP, formed the agency together with a team of other ex-police officers, and established the company in 2003. Soon this agency became a Woman-Owned Worldwide Private Investigation Agency. </div></td>
<td width="3%"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td><div align="justify"><strong>WORLDWIDE INVESTIGATION & PROTECTION CONFIDENTIALITY PLEDGE</strong><BR>
We commit to keep all information and data given by client CONFIDENTIAL. We will not share, sell or leak client's information to anyone extraneous other than to effect an investigation assignment.</div></td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>

<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><div align="center">"Licensed by the Singapore Police Force" </div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><div align="center"></div></td>
</tr>
<tr>
<td colspan="2"><DIV align="center" class="style10">© Copyright 2005 WORLDWIDE INVESTIGATION & PROTECTION PTE LTD.</DIV>
<DIV align="center"><span class="style10">All Right Reserved. <A href="privacy.htm" target="content">Privacy</A></span><strong><BR>
</strong></DIV></td>
</tr>
</table>
<pre> </pre>
</body>
</html>

Corey Bryant · Posted: Thu Nov 10, 2005 3:59 am

Without gong into too much detail at thispoint, let me first ask - who created this - who or DW? There is a lot of bloated code in there and the problem is, tables are not meant to be used for a page layout, layers are. Mixing these two like this can be extremely difficult