I have a table with 4 sepearte <td>'s I would like one of them to scroll up and down when needed, so that the main page does not need to scroll.
Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rumors Bar and Grill</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<cfsetting showdebugoutput="no">
<body>
<table id="wrapper" cellspacing="0" cellpadding="0">
<tr>
<td id="header"><img src="Images/top3.jpg"></td>
</tr>
<tr>
<td id="nav"> <cfinclude template="navigation.cfm"> </td>
</tr>
<tr>
<td id="content" valign="top"> stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
stuff<br>
</td>
</tr>
<tr>
<td id="right" valign="top">and here is extra, maybe an ad or something</td>
</tr>
</table>
</body>
</html>
and here is my css
/* CSS Document */
body
{
background-color: #000000;
font-family:arial, verdana, sans-serif;
}
#header
{
position:absolute;
top:0px; left:25%;
width:50%
bacground-color:#f3f3f3;
height:60px
}
#nav
{
position:absolute;
left:0px; top:162px;
width:100px;
font-weight:bold;
background-color:gray;
border-style:dashed; border-width:1px;
padding:5px;
height:30em;
}
#right
{
position:absolute;
left:950px; top:162px;
font-weight:bold;
background-color:gray;
border-style:dashed; border-width:1px;
padding:5px;
width:100px;
height:30em;
}
#content
{
position:absolute;
left:120px; top:162px;
padding-top:5px;
background-color:gray;
border-style:dashed; border-width:1px;
width:820px;
height:30em;
overflow:auto;
}
a
{
font-family: arial, verdana, sans-serif;
font-size:12px;
font-weight:bold;
}
a:link
{
color:#ffffff;
text-decoration:none;
}
a:visited
{
color:#ffffff;
text-decoration:none;
}
a:active
{
color:#0033ff;
text-decoration:underline;
}
a:link:hover
{
background-color:B8B8B8;
text-decoration:underline;
}
I tried it using <div> tags and that seemed to really mess up my entire layout.
any help would be great.
Thanks