Side Bar not appearing in the same row as the rest of the panels (appears on top row)

Hello , I have a web application in JSP where I have implemented the requsite functionality , but I am struggling with the Viewer.

I am to include a Side -Bar which acts as a Navigation to this specific Page .I am using the include directive to include another jsp/html page that should appear as a sideBar to the existing application.

I dived the page into 3 parts (after the header etc ..) out of which the first (20%) is the sidebar .

But what is happening is the other 2 panels (20 and 60) appear not as rows in the same level ..but appear below  the first row(side bar)



soemthing like :

First SideBar

SecondPanel   ThirdtPanel

Whereas I would like to have

First SideBar  SecondPanel ThirdtPanel


Sorry abt the lengthu code : Thanks for the time.


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@page contentType="text/html"%>
<%@taglib uri='/WEB-INF/cewolf.tld' prefix='cewolf' %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
       <title>Display Performance Statistics</title>
    <meta http-equiv="description" content="Displays the Requisite Graph">
    <link rel="stylesheet" href="css/main1.css" type="text/css">
      <link rel="stylesheet" href="css/main2.css" type="text/css">
 </head>
 
  <body
 
        style="background:#FFFFFF;"
        marginwidth="0"
      marginheight="0"
      leftmargin="0"
      topmargin="0"
      rightmargin="0"
      bottommargin="0"
 
  >
 
 <!-- --------------------------------------------------- TOP GIFS ---------- -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
    <td nowrap>
        <table width="500" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td ><img src="http://some/shared/$$$$$$.gif"></td>
        </tr>
       
        </table>
    </td>
</table>
 
 <!-- ---STRIPE -->
<table class="tablehead" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
      <td valign="middle" width="10"><img src="img/trans.gif" height="1"width="10"></td>
      <td valign="middle" width="100"><img src="img/trans.gif" height="1"width="10"></td>
      <td width="70%" height="25" align="center" valign="middle">
            <nobr>
                  
                  <span class="whitetitle"style="font-size:13pt;"/>
                  Webservices Statistics
                  </span>
            </nobr>
      </td>
      
      <td valign="middle" width="10"><img src="include/trans.gif" height="1"width="10"></td>

</tr>
</table>
 
 <!-- --------------------------------------------------- EMPTY SPACE SEPARATOR --- -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="10">&nbsp;</td></tr><tr><td height="10">&nbsp;</td></tr></table>
 
 
<!-- --------------------------------------------------- 3 PANELS TABLE ---- -->
<table border="0" width="100%" cellpadding="15">

<tr>

<td width="20%" valign="top">
      <table  border="0" cellspacing="0" cellpadding="0">
      <tr>
            <td ><%@include file="sidebar.jsp" %></td>
      </tr>
      </table>
</td>



</tr>

<tr>
<td width="20%" valign="top">
<!-- --------------------------------------------------- LEFT PANEL -------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
      <td class="tablehead" width="6"><img src="img/sm_l.gif" width="6" height="6"></td>
      <td class="tablehead"><img src="img/trans.gif" width="1" height="1"></td>
      <td class="tablehead" width="6">
            <div align="right"><img src="img/sm_r.gif" width="6" height="6"></div>
      </td>
</tr>

<tr>
      <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
      <td class="tablehead">
            <!-- <div align="center"><span class="offwhite" style="color:#fbe249;font-size:11pt">Choose Graph Type</span></div> -->
            <div align="center"><span class="offwhite" style="font-size:11pt">Choose Graph Type</span></div>
      </td>
      <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
</tr>

<tr class="tableborder">
      <td colspan="3" class="tableborder"><img src="img/trans.gif" height="3" width="1"></td>
</tr>


<tr>
    <td class="tablebody" width="6"><img src="img/trans.gif" width="6" height="1"></td>
    <td class="tablebody">



<form action="graph.jsp">

      <table width="100%" border="0" cellspacing="0" cellpadding="4">
        <tr><td class="tablebody" valign="top" height="30" colspan="7">&nbsp;</td></tr>
            <tr>
                  <td width="15">&nbsp;</td>
                  <td width="150" align="right">
                        <span class="greenboldsmall"><nobr>Graph Type</nobr></span>
                  </td>
                  <td width="5">&nbsp;</td>
                  <td width="120" align="left">
                        <select name="graphType" scope="request">
                              <option>stackedVerticalBar3D</option>
                              <option>line</option>
                              <option>area</option>
                              <option>stackedverticalbar</option>
                              <option>horizontalbar</option>
                              <option>horizontalbar3d</option>
                              <option>stackedhorizontalbar</option>
                              <option>verticalbar</option>
                              <option>verticalbar3d</option>
                              
                        </select>
                  </td>
                  <td width="15">&nbsp;</td>
            </tr>
            
            <tr>
                  <td width="15">&nbsp;</td>
                  <td width="120" align="right"><br>
                        <input type="submit" border="0" class="buttongreen" style="text-align:center;width:70px;" value="Submit&nbsp;&raquo;&nbsp;" />
                  </td>
                  <td colspan="3">&nbsp;</td>
            </tr>
            <tr><td class="tablebody" colspan="7" height="30">&nbsp;</td></tr>
      </table>
 
 
        <jsp:useBean id="wsinfo" class="some.model.LogInfo" scope="session">
         <jsp:setProperty name="wsinfo" property="path" value="${initParam.filePath}" />
         <jsp:setProperty name="wsinfo" property="wsName" value="${param.name}" />
        </jsp:useBean>
        
        
        <jsp:useBean id="wsViews" class="some.model.WsViewCountData" scope="session">
         <jsp:setProperty name="wsViews" property="factorName" value="${param.name}" />
         <jsp:setProperty name="wsViews" property="wsList" value="${wsinfo.wsList}" />
        <jsp:setProperty name="wsViews" property="type" value="dayofweek" />
        </jsp:useBean>
 
 
      <jsp:useBean id="graphParam" class="some.bean.GraphBean"/>
      <jsp:setProperty name="graphParam" property="*" />


</form>

</td>
      <td class="tablebody" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
      <td class="tablebody" width="6"><img src="include/bl.gif" width="6" height="6"></td>
      <td class="tablebody"><img src="include/trans.gif" width="1" height="1"></td>
      <td class="tablebody" width="6">
      <div align="right"><img src="include/br.gif" width="6" height="6"></div>
      </td>
</tr>
</table>

   

</td>
<td width="80%" valign="top">

<!-- --------------------------------------------------- RIGHT PANEL ------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
      <td class="tablehead" width="6"><img src="include/sm_l.gif" width="6" height="6"></td>
      <td class="tablehead"><img src="include/trans.gif" width="1" height="1"></td>
      <td class="tablehead" width="6">
            <div align="right"><img src="include/sm_r.gif" width="6" height="6"></div>
      </td>
</tr>

<tr>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
      <td class="tablehead">
            <div align="center"><span class="offwhite" style="font-size:11pt">Type of Image</span></div>
      </td>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>

<tr>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
      <td>

            <table width="100%" border="0" cellspacing="0" cellpadding="15">
            <tr>
                  <td>
                  <br>
                        <c:choose>
                              <c:when test="${graphParam.graphType eq null}">
                              <cewolf:chart
                                  id="line"
                                  title="Page View Statistics"
                                  type="stackedVerticalBar3D"
                                  xaxislabel="Page"
                                  yaxislabel="Views">
                                  <cewolf:data>
                                      <cewolf:producer id="wsViews"/>
                                  </cewolf:data>
                              </cewolf:chart>
                              <p>
                              <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                              </c:when>
                              
                              <c:otherwise>
                                    <cewolf:chart
                                  id="line"
                                  title="Page View Statistics"
                                  type="${graphParam.graphType}"
                                  xaxislabel="Page"
                                  yaxislabel="Views">
                                  <cewolf:data>
                                      <cewolf:producer id="wsViews"/>
                                  </cewolf:data>
                              </cewolf:chart>
                              <p>
                              <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                              </c:otherwise>
                              
                        </c:choose>
                                                      
                        
                  </td>
            </tr>
            <tr><td height="150">&nbsp;</td></tr>
            </table>


      
      </td>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
    <td class="tablehead" colspan="3"><img src="include/trans.gif" width="1" height="6"></td>
</tr>
</table>

   
</td>
</tr>



</table>

  </body>
</html>



&&&&&&&&&&&&&&&&&&&&

Side Bar :

<font size='5'>Topics</font><p>
  <table width='145'>
    <tr><td><a href='introduction.jsp'>
                         Introduction </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Using Templates </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Optional Content </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Role-based Content </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Nested Templates</a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Implementing Templates </a></td></tr>

  </table></p>
micro_learnerAsked:
Who is Participating?
 
gops1Commented:
As a best practice, try indenting your code with tabs, it becomes easier to all in debugging and maintaining the code:
Some minor changes to your code, hope this is what you needed.

<html>
  <head>
       <title>Display Performance Statistics</title>
    <meta http-equiv="description" content="Displays the Requisite Graph">
    <link rel="stylesheet" href="css/main1.css" type="text/css">
     <link rel="stylesheet" href="css/main2.css" type="text/css">
 </head>
 
  <body
 
       style="background:#FFFFFF;"
       marginwidth="0"
     marginheight="0"
     leftmargin="0"
     topmargin="0"
     rightmargin="0"
     bottommargin="0"
 
  >
 
 <!-- --------------------------------------------------- TOP GIFS ---------- -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
    <td nowrap>
        <table width="500" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td ><img src="http://some/shared/$$$$$$.gif"></td>
        </tr>
       
        </table>
    </td>
</table>
 
 <!-- ---STRIPE -->
<table class="tablehead" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
     <td valign="middle" width="10"><img src="img/trans.gif" height="1"width="10"></td>
     <td valign="middle" width="100"><img src="img/trans.gif" height="1"width="10"></td>
     <td width="70%" height="25" align="center" valign="middle">
          <nobr>
               
               <span class="whitetitle"style="font-size:13pt;"/>
               Webservices Statistics
               </span>
          </nobr>
     </td>
     
     <td valign="middle" width="10"><img src="include/trans.gif" height="1"width="10"></td>

</tr>
</table>
 
 <!-- --------------------------------------------------- EMPTY SPACE SEPARATOR --- -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="10">&nbsp;</td></tr><tr><td height="10">&nbsp;</td></tr></table>
 
 
<!-- --------------------------------------------------- 3 PANELS TABLE ---- -->
<table border="1" width="100%" cellpadding="15">

<tr>

<td width="20%" valign="top">
     <table  border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td ><%@include file="sidebar.jsp" %></td>
     </tr>
     </table>
</td>
<td width="20%" valign="top">
<!-- --------------------------------------------------- LEFT PANEL -------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
     <td class="tablehead" width="6"><img src="img/sm_l.gif" width="6" height="6"></td>
     <td class="tablehead"><img src="img/trans.gif" width="1" height="1"></td>
     <td class="tablehead" width="6">
          <div align="right"><img src="img/sm_r.gif" width="6" height="6"></div>
     </td>
</tr>

<tr>
     <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
     <td class="tablehead">
          <!-- <div align="center"><span class="offwhite" style="color:#fbe249;font-size:11pt">Choose Graph Type</span></div> -->
          <div align="center"><span class="offwhite" style="font-size:11pt">Choose Graph Type</span></div>
     </td>
     <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
</tr>

<tr class="tableborder">
     <td colspan="3" class="tableborder"><img src="img/trans.gif" height="3" width="1"></td>
</tr>


<tr>
    <td class="tablebody" width="6"><img src="img/trans.gif" width="6" height="1"></td>
    <td class="tablebody">



<form action="graph.jsp">

     <table width="100%" border="0" cellspacing="0" cellpadding="4">
        <tr><td class="tablebody" valign="top" height="30" colspan="7">&nbsp;</td></tr>
          <tr>
               <td width="15">&nbsp;</td>
               <td width="150" align="right">
                    <span class="greenboldsmall"><nobr>Graph Type</nobr></span>
               </td>
               <td width="5">&nbsp;</td>
               <td width="120" align="left">
                    <select name="graphType" scope="request">
                         <option>stackedVerticalBar3D</option>
                         <option>line</option>
                         <option>area</option>
                         <option>stackedverticalbar</option>
                         <option>horizontalbar</option>
                         <option>horizontalbar3d</option>
                         <option>stackedhorizontalbar</option>
                         <option>verticalbar</option>
                         <option>verticalbar3d</option>
                         
                    </select>
               </td>
               <td width="15">&nbsp;</td>
          </tr>
         
          <tr>
               <td width="15">&nbsp;</td>
               <td width="120" align="right"><br>
                    <input type="submit" border="0" class="buttongreen" style="text-align:center;width:70px;" value="Submit&nbsp;&raquo;&nbsp;" />
               </td>
               <td colspan="3">&nbsp;</td>
          </tr>
          <tr><td class="tablebody" colspan="7" height="30">&nbsp;</td></tr>
     </table>
 
 
       <jsp:useBean id="wsinfo" class="some.model.LogInfo" scope="session">
        <jsp:setProperty name="wsinfo" property="path" value="${initParam.filePath}" />
        <jsp:setProperty name="wsinfo" property="wsName" value="${param.name}" />
       </jsp:useBean>
       
       
       <jsp:useBean id="wsViews" class="some.model.WsViewCountData" scope="session">
        <jsp:setProperty name="wsViews" property="factorName" value="${param.name}" />
        <jsp:setProperty name="wsViews" property="wsList" value="${wsinfo.wsList}" />
       <jsp:setProperty name="wsViews" property="type" value="dayofweek" />
       </jsp:useBean>
 
 
     <jsp:useBean id="graphParam" class="some.bean.GraphBean"/>
     <jsp:setProperty name="graphParam" property="*" />


</form>

</td>
     <td class="tablebody" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
     <td class="tablebody" width="6"><img src="include/bl.gif" width="6" height="6"></td>
     <td class="tablebody"><img src="include/trans.gif" width="1" height="1"></td>
     <td class="tablebody" width="6">
     <div align="right"><img src="include/br.gif" width="6" height="6"></div>
     </td>
</tr>
</table>

   

</td>
<td width="80%" valign="top">

<!-- --------------------------------------------------- RIGHT PANEL ------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
     <td class="tablehead" width="6"><img src="include/sm_l.gif" width="6" height="6"></td>
     <td class="tablehead"><img src="include/trans.gif" width="1" height="1"></td>
     <td class="tablehead" width="6">
          <div align="right"><img src="include/sm_r.gif" width="6" height="6"></div>
     </td>
</tr>

<tr>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
     <td class="tablehead">
          <div align="center"><span class="offwhite" style="font-size:11pt">Type of Image</span></div>
     </td>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>

<tr>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
     <td>

          <table width="100%" border="0" cellspacing="0" cellpadding="15">
          <tr>
               <td>
               <br>
                    <c:choose>
                         <c:when test="${graphParam.graphType eq null}">
                         <cewolf:chart
                             id="line"
                             title="Page View Statistics"
                             type="stackedVerticalBar3D"
                             xaxislabel="Page"
                             yaxislabel="Views">
                             <cewolf:data>
                                 <cewolf:producer id="wsViews"/>
                             </cewolf:data>
                         </cewolf:chart>
                         <p>
                         <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                         </c:when>
                         
                         <c:otherwise>
                              <cewolf:chart
                             id="line"
                             title="Page View Statistics"
                             type="${graphParam.graphType}"
                             xaxislabel="Page"
                             yaxislabel="Views">
                             <cewolf:data>
                                 <cewolf:producer id="wsViews"/>
                             </cewolf:data>
                         </cewolf:chart>
                         <p>
                         <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                         </c:otherwise>
                         
                    </c:choose>
                                             
                   
               </td>
          </tr>
          <tr><td height="150">&nbsp;</td></tr>
          </table>


     
     </td>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
    <td class="tablehead" colspan="3"><img src="include/trans.gif" width="1" height="6"></td>
</tr>
</table>

   
</td>
</tr>



</table>

  </body>
</html>
0
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.

All Courses

From novice to tech pro — start learning today.