HTML Right Navigation

I have a website that uses a left navigation page that loads on the left of every page of the website.  I have recently created a page to show pictures that I want to show on the right side of the page.  How do I code my webpages to encompass both the leftnav as well as another page on the right side?

Below is the html text that adds the leftnav to each webpage.

<td bgcolor="#ffffff" height="100%" valign="top" width="2"></td> 
        <td bgcolor="#ffffff" valign="top" width="189">@@BEGIN_OF_COMMENT#include file="leftnav.html" @@END_OF_COMMENT</td> 
        <td valign="top" width="4"></td> 
        <td bgcolor="#ffffff" valign="top" width="2"></td> 
        <td valign="top" width="558"> 

Open in new window

Thanks in advance.
ollybubaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Can you please provide a link to your test page.  

I am confused.  You have code for the left side, but not the right? I may be missing something but I'm  not sure how to help with that.

In simple terms you can create a wrapper class with the width, then give the left class a width and float it left and do the same for the right class.  Just make sure the 2 widths equal the width of the wrapper in px or %
<div class="wrapper">
    <div class="col-left">left</div>
    <div class="col-right">right</div>
</div>

Open in new window

0
ollybubaAuthor Commented:
So out of this original code where would I insert and end the div command?

<center> 
  <table border="0" cellspacing="0" cellpadding="0" width="800" bgcolor="#000000" valign="TOP"> 
    <tbody> 
      <tr> 
        <td bgcolor="#ffffff" valign="top" width="800" align="center"><img width="800" src="/spaw/getimg.php?img=home_files/header.jpg" /></td> 
      </tr> 
    </tbody> 
  </table>@@BEGIN_OF_COMMENT Main Content Table @@END_OF_COMMENT 
  
  <table border="0" cellspacing="0" cellpadding="0" width="800" bgcolor="#ffffff"> 
    <tbody> 
      <tr> 
        <td bgcolor="#ffffff" height="100%" valign="top" width="2"></td> 
        <td bgcolor="#ffffff" valign="top" width="189">@@BEGIN_OF_COMMENT#include file="leftnav.html" @@END_OF_COMMENT</td> 
        <td valign="top" width="4"></td> 
        <td bgcolor="#ffffff" valign="top" width="2"></td> 
        <td valign="top" width="558"> 
          <table border="0" width="550"> 
            <tbody> 
              <tr> 
                <td colspan="3"></td> 
              </tr> 
              <tr> 
                <td colspan="3"> 
                  <div align="center"> 
                    <p><a href="/spaw/gethref.php?

Open in new window


            (starts the rest of the main page)
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you using tables and tables inside of tables for a layout?    If so, stop and start over.  You are in for a mess and a broken site.

Start with a css grid and I prefer responsive.  http://getbootstrap.com/  or http://foundation.zurb.com/

In any case, you don't have enough code to help you.  I am actually even more confused. Your question states your code is for a left nav but your new code shows that in the 5th column.

Please create a very simple test page and post the link here or perhaps recreate it in jsbin.com or jsfiddle for us to look at.  

 http://css-tricks.com/reduced-test-cases/
0
ollybubaAuthor Commented:
Ya I did not add the right side code in yet.  I'm just modifying the page.  I didn't create it.  I was showing you the leftnav that is already in place.  I need to add a rightnav or page to it.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I don't condone using tables for layout.

But in simple terms
<table>
    <tr>
        <td>Left</td>
        <td>mid</td>
        <td>right</td>
    </tr>
</table>

Open in new window

If your css is jumbling things around beyond that, I wouldn't even attempt to help.   Overall, this is not good practice.  Additionally, you shouldn't use inline styles anymore.  Keep the html simple and use css.

<td bgcolor="#ffffff" valign="top" width="800" align="center">

should be
<style>
.foo{
   background-color:#fff;
   width:800px;
   text-aligin:center;
   vertical-align:text-top;
}
</style>
<td class="foo">

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.