Placing table problem

webby09 · Joined: 02 Jul 2009 Posts: 8

Hello the bottom border of my content box(div id=container) moves as if its attached to a table(div id=pro) inside that content box. I want my box's bottom border to stay no matter where I move my table to. Can anyone please take a look at my html and css codes and help me fix this? Thank you.

<HTML codes>

<table width="800" height="28" border="0" align="center">
<tr>
<td height="24" bgcolor="#666666"><font face="Arial, Helvetica, sans-serif" size="4"><a href="Untitled-2.html"">About </a><a href="Untitled-2.html"target="right">Projects </a><a href="Untitled-2.html"target="right">Resume </a><a href="Untitled-2.html"target="right">Contact </a><a href="Untitled-2.html"target="right">Others</a></font></td>
</tr></table>
</div>

<div id="container">
<table width="800" height="400" border="0">
<tr>
<td> </td><br>
<h1>Projects</h1>
<p>Click the title of the project in order to view it.</p>
</tr>
</table>

<div id="pro">
<table width="500" height="28" border="1" align="center">
<tr>
<td height="24"><font face="Arial, Helvetica, sans-serif" size="2"><a href="Untitled-2.html""><h2>Seattle Design Project
</h2></a></font></td>
</tr></table></div>

<css codes>

a {
text-decoration: none;
word-spacing:30px;
text-indent: 20px;
font-size:12pt;
color:#FFFFFF;
font-weight:bold;
text-indent: 20px;

}

div#pro {
text-decoration: none;
word-spacing:30px;
text-indent: 20px;
font-size:12pt;
color:#FF9900;
font-weight:bold;
text-indent: 20px;
margin-left: -75px;
margin-right: 135px;
margin-top: -280px;
border-color:#009999;

}

h2 {
color:#ffad00;
font-family: Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
}

div#container{
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
margin-left: 105px;
margin-right: 105px;
margin-top: -2px;
border-color:#666666;
}

sticks464 · Joined: 31 Dec 2006 Posts: 2308

I have taken the liberty to show you how to do your layout without tables. You were using a lot of unnecessary css rules that are not needed and causing your layout to display incorrectly.

I am also showing how to space letters as well as words in answer to your other post.

html