CSS Layout Help

Xylophonic

Hi,
I need help with a template I am currently using. At the moment it has a nav menu on the left hand side but I want a similar one on the right hand side, could someone help me with the coding of this?
Here is an image of what I would like to do: http://i42.tinypic.com/2jc8tw1.jpg
Regards,
Daz
This is the code I currently use:

/* +++++++++++++++++++++++++++++ Shifting Ground +++++++++++++++++++++++++++++ */
 
/* ++++++++++++++++++++ Common Styles ++++++++++++++++++++ */
 
* {
 margin: 0px;
 padding: 0px;
}
body {
 color: #fff;
 background-color: #484848;
 font-family: 'verdana', 'helvetica', sans-serif;
 font-size: 100%;
 text-align: center;
}
table {
 font-size: 1em;
}
td {
 color: #fff;
 background-color: inherit;
 font-family: 'verdana', 'helvetica', sans-serif;
 font-size: 1em;
}
a {
 color: #fff;
 background-color: inherit;
 text-decoration: underline;
}
a:hover {
 color: #fff;
 background-color: inherit;
 text-decoration: none;
}
img {
 border: none;
}
ul, ul li {
 list-style: none outside;
}
ol, ol li {
 list-style: decimal inside;
}
p {
 padding: 0.6em 0em 0.6em;
}
fieldset {
 border: none;
}
input, textarea, select {
 font-family: 'verdana', 'helvetica', sans-serif;
 font-size: 13px;
}
.hidethis {
 display: none;
}
.clearthis {
 margin : 0px;
 height : 1px;
 clear : both;
 float : none;
 font-size: 1px;
 overflow : hidden;
 visibility: hidden;
}
 
/* ++++++++++++++++++++ Image Thumbnails ++++++++++++++++++++ */
.tb_center {
 text-align: center;
}
.tb_center img {
 margin: 1.3em auto;
 border: 1px #fff solid;
}
 
/* ++++++++++++++++++++ Body Wrappers ++++++++++++++++++++ */
#body_wrapper {
 margin: 35px 10px;
 width: 982px;
 background: url() no-repeat 100% 68px;
 font-size: 0.71em;
}
/* ++++++++++++++++++++ Body Container ++++++++++++++++++++ */
#body_container {
 float: right;
 position: relative;
 left: -243px;
 width: 496px;
 background: url('images/main_bg_bot.gif') no-repeat 0% 100%;
}
#body_container_b {
 padding: 15px 0px;
 width: 496px;
 background: url('images/main_bg_top.gif') no-repeat 0% 0%;
}
#body_container_c {
 color: inherit;
 background-color: #8e8257;
 border-left: #fff 6px solid;
 border-right: #fff 6px solid;
}
 
/* ++++++++++++++++++++ Page Header ++++++++++++++++++++ */
#page_header {
 padding-bottom: 2px;
 color: inherit;
 background-color: #b3ab78;
}
#page_header h1 {
 position: relative;
 top: -4px;
 width: 100%;
 height: 40px;
 background: url('images/counterstrike_logo.gif') no-repeat 50% 50%;
}
 
/* ++++++++++++++++++++ Page Content ++++++++++++++++++++ */
#page_content {
 padding: 15px 17px 10px;
 font-weight: bold;
 text-align: left;
}
.link_readmore {
 padding: 35px 0px 10px;
 text-align: right;
}
.link_readmore a {
 margin-left: auto;
 display: block;
 width: 94px;
 height: 24px;
 background: url('images/button_readmore.gif') no-repeat 0% 0%;
}
 
/* ++++++++++++++++++++ Navigation Menu Left ++++++++++++++++++++ */
#navmenu {
 float: left;
 margin-top: 68px;
 position: relative;
 left: 77px;
 width: 166px;
 background: url('images/navmenu_bg_bot.gif') no-repeat 0% 100%;
 font-size: 1.15em;
 font-weight: bold;
}
#navmenu_b {
 padding: 15px 0px;
 width: 166px;
 background: url('images/navmenu_bg_top.gif') no-repeat 0% 0%;
}
#navmenu_c {
 color: inherit;
 background-color: #6d6845;
 border-left: #fff 6px solid;
}
#navmenu a {
 text-decoration: none;
 text-transform: uppercase;
}
#navmenu li {
 border-top: #fff 1px solid;
}
#navmenu li a {
 display: block;
 padding: 5px 0px;
 width: 160px;
}
#navmenu li a:hover {
 color: inherit;
 background-color: #989160
}
#navmenu li.list_first {
 border-top: none;
}
 
/* ++++++++++++++++++++ Navigation Menu Right ++++++++++++++++++++ */
#navrightmenu {
 float: left;
 margin-top: 168px;
 position: relative;
 left: 77px;
 width: 166px;
 background: url('images/navmenu_bg_botright.gif') no-repeat 0% 100%;
 font-size: 1.15em;
 font-weight: bold;
}
#navrightmenu_b {
 padding: 15px 0px;
 width: 166px;
 background: url('images/navmenu_bg_topright.gif') no-repeat 0% 0%;
}
#navrightmenu_c {
 color: inherit;
 background-color: #6d6845;
 border-left: #fff 6px solid;
}
#navrightmenu a {
 text-decoration: none;
 text-transform: uppercase;
}
#navrightmenu li {
 border-top: #fff 1px solid;
}
#navrightmenu li a {
 display: block;
 padding: 5px 0px;
 width: 160px;
}
#navrightmenu li a:hover {
 color: inherit;
 background-color: #989160
}
#navrightmenu li.list_first {
 border-top: none;
}
 
/* ++++++++++++++++++++ Page Footer ++++++++++++++++++++ */
#page_footer {
 padding: 20px 0px;
 font-size: 0.9em;
 font-weight: bold;
}
 

rossc007

I think you'll need to throw up a copy of the HTML too in order for anyone to help mate

Xylophonic

Ok cool, I can't upload it at the moment so I'll just upload the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Games Development @ IT Sligo</title>
<script type="text/javascript" src="bookMark.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
 <div id="body_wrapper">

  <!-- Start of Body Container -->
  <div id="body_container">
  <div id="body_container_b">
  <div id="body_container_c">

   <!-- Start of Page Header -->
   <div id="page_header">
    <!-- Website Title -->
    <h1><span class="hidethis">
    Counter Strike
    </span></h1>
   </div>
   <!-- End of Page Header -->

   <!-- Start of Page Content -->
   <div id="page_content">

    <p>Don't forgot to check <a href="[URL]http://www.freewebsitetemplates.com">free[/URL] website templates</a> every day, because we add at least one free website template daily.</p>
    
    <p>This is a template designed by free website templates for you for free you can replace all the text by your own 
    text. This is just a place holder so you can see how the site would look like.</p> 
    
    
    <p>If you're looking for beautiful and professionally made templates you can find them at <a href="[URL]http://www.templatebeauty.com">Template[/URL] Beauty</a>.</p>
    
    <div class="tb_center">
    <img src="images/game_consoles.gif" width="425" height="176" alt="" />
    </div>
<p>You can remove any link to our websites from this template you're  free to use the template without linking 
    back to us. Don't want your boss to know you used a free website template ;) .</p>
    
   <p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="[URL]http://www.freewebsitetemplates.com/forum/">forum</a>.</p[/URL]>
    
    <p>If you're looking for beautiful and professionally made templates you can find them at <a href="[URL]http://www.templatebeauty.com">Template[/URL] Beauty</a>.</p>
    <p>To find great hosting providers visit <a href="[URL]http://www.webhostingzoom.com">Web[/URL] Hosting Zoom</a></p>

    <!-- Bookmark Button -->
    <div class="link_button">
                 <form action="#">
      <input type="button" value="Bookmark us!" onclick="bookmark('http://www.google.com/','Google')">
     </form>
    </div>
   </div>
   <!-- End of Page Content -->
  </div>
  </div>
  </div>
  <!-- End of Body Container -->
 
  <!-- Start of Navigation Menu -->
  <div id="navmenu">
  <div id="navmenu_b">
  <div id="navmenu_c">
   <h3><span class="hidethis">Site Menu:</span></h3>
   <ul>
   <li class="list_first"><a href="index.htm">Home</a></li>
   <li><a href="year_1.htm">Year 1</a></li>
   <li><a href="year_2.htm">Year 2</a></li>
   <li><a href="year_3.htm">Year 3</a></li>
   <li><a href="contact.htm">Contact Us</a></li>
   </ul>

  </div>
  </div>
  </div>
  <!-- End of Navigation Menu -->
        
        
        <!-- Start of Navigation Right Menu -->
  <div id="navmenuright">
  <div id="navmenuright_b">
  <div id="navmenuright_c">
   <h3><span class="hidethis">Site Menu:</span></h3>
   <ul>
   <li class="list_first"><a href="index.html">Home</a></li>
   <li><a href="year_1.html">Year 1</a></li>
   <li><a href="year_2.html">Year 2</a></li>
   <li><a href="year_3.html">Year 3</a></li>
   <li><a href="contact.html">Contact Us</a></li>
   </ul>

  </div>
  </div>
  </div>
  <!-- End of Navigation Right Menu -->

  <div class="clearthis">&nbsp;</div>

  <!-- Start of Page Footer -->
  <div id="page_footer">
  </div>
  <!-- End of Page Footer -->

 </div>
</body>
</html>

Pablod

Just had a quick look, so my answer may not be 100%

1st- thing do you need to use relative position on your css
2nd- look at the order of your HTML

Inside your Body_wrapper
You have body containter then Left menu then right menu all floated left.
Place your leftnavmenu before your Body container, then your rightnavmenu (floated right) after the body container

Hope this helps a bit.

Xylophonic

It didn't seem to work the right side menu is still missing.

Nulty

For a start

Your div is called

<div id="navmenuright">

And your css rule is calling

#navrightmenu {