Sorry for such a stupid question, but I have been working on this for days. I'm trying to change over to CSS but it isn't as easy as it seems in the tutorials. One of my problems is trying to set the width of elements. I can't seem to set the width for anything. For example I'm trying to make a navigation bar at the top of the page, but I can't get any space in between the links. Man tables seems so much easier:

<style.css>

.nav {
position: fixed;
top: 65px;
left: 5%;
}
.nav * {
position: relative;
display: inline;
width: 20%;
}

<index.php>

<div class="nav">
<b><a href="cv.htm">CV</a></b>
<b><a href="events.php">Events</a></b>
<b><a href="http://del.icio.us/sassman/">Links</a></b>
<b><a href="spgm/index.php">Pictures</a></b>
<b><a href="videos.htm">Videos</a></b>
<b><a href="tunes.htm">Tunes</a></b>
</div>

Try defining your menu as an inline list, give width, margin and padding values to .nav li. Different browsers treat css differently, so you may need to play with these to see how they behave with different browsers. To get things working correctly in IE, you may have to hide some rules from it in a separate stylesheet, perhaps with @import url(hidefromie.css) screen; in your html headers.

Here is Mine:


[HTML]
<div id="subheader">
<a href="index.php">HOME</a>
<hr/>


<ul>
<li><a href="GrpPgChsQik.php">Quick Group Page</a></li>
<li><a href="GrpPgChsQik.php?ToMem=1">Quick Group Member Page</a></li>
<li><a href="MemPgChsQik.php">Quick Member Page</a></li>

<li><a href="GrpPgChoose.php">Pageout Predefined Group</a></li>
<li><a href="MemPgChoose.php">Pageout Select Members</a></li>
<li><a href="chat.php" target="_blank">Chat</a></li>
<li><a href="LogViewer.php">Page Logs</a></li>
<li><a href="MoreIndex.php">More...</a></li>
<li><a href="../myotl/index.php">Overtime Tracking</a></li>

</ul>

</div> <!-- subheader -->
[/HTML]

and CSS is:
[HTML]
#subheader{
line-height: 1.5em;
background-color: #C0C0C0;
width: 90%;
text-align: center;
padding: 0 5%;
}


#subheader ul{
text-align: center;
margin-left: 0;
margin-top:0;
margin-bottom:0;
padding-left: 0;
}

#subheader li{
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid black;
display: inline
}

#subheader li:first-child {
border: none;
}
[/HTML]

A div should have four items - left, top, width, height - as a minimum. You can omit the width and height if you want the div to resize according to the content, but that can create lots of problems as different browsers and OS's use different fonts. Therefore, you risk one div merging into the next one.
Try to use fixed px sizes as percentages are not correctly recognized by all browsers.

Your divs should never be full - leave a little "whitespace" because it looks better - believe me!