Tag Archives: SiteMapDataSource

[RESOLVED]Menu Control submenu links appear but are not active when rolled over in IE 10

I have a menu control in a masterpage. the Menu Control submenu pops open and  appears with text on it when i open it via ie 10, but the links do not work when you try to click on them, and the submenu disappears after a few seconds even though the cursor
is still over the submenu. i have not idea why the links are inactive here but in firfox, chrome, safari appear correctly. Some help would be much appreciated.

http://tinyurl.com/la5k7st

Menu code :

<div id="nav">
                    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
                        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
                        DisappearAfter="600" StaticDisplayLevels="2"
                        StaticSubMenuIndent="0px" Width="181px" SkipLinkText=""
                        DynamicHorizontalOffset="1"
                        DynamicPopOutImageUrl="~/images/arr_white.gif"
                        StaticPopOutImageUrl="~/images/arr_white.gif"
                        CssClass="SomeMenuClass" >
                            <DynamicHoverStyle ForeColor="#E9C379" />
                            <DynamicMenuStyle BorderStyle="None" />
                            <LevelMenuItemStyles>
                            <asp:MenuItemStyle CssClass="Level1Style" Width="195px" />
                            <asp:MenuItemStyle CssClass="Level2Style" Width="170px"  />
                            <asp:MenuItemStyle CssClass="Level3Style" Width="200px" />
                            </LevelMenuItemStyles>
                            <StaticHoverStyle Font-Strikeout="False" ForeColor="#E9C379" />
                    </asp:Menu>
                    <div id="nav_bot">
                    </div>
</div>
Site Map:

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="default.aspx" title="Home"  description="">
   
         <siteMapNode url="registry/Default.aspx" title="Significant Tree Registry"  description="Significant Tree Registry" />      
         <siteMapNode url="nominate/default2.aspx" title="Nominate a Significant Tree"  description="ominate a Significant Tree" />
         <siteMapNode url="javascript:void(0)" title="Criteria for Scoring Trees"  description="Criteria for Scoring Trees">
               <siteMapNode url="scoring_criteria/how_a_tree_is_scored.aspx"  title="How a Tree is Scored"  description="How a Tree is Scored" />
               <siteMapNode url="scoring_criteria/measuring_a_trees_diameter.aspx"  title="Measuring a Trees Diameter"  description="Measuring a Trees Diameter" />
               <siteMapNode url="scoring_criteria/measuring_a_trees_height.aspx"  title="Measuring a Trees Height"  description="Measuring a Trees Height" />
               <siteMapNode url="scoring_criteria/measuring_the_crown_or_spread.aspx"  title="Measuring the Crown or Spread"  description="Measuring the Crown or Spread" />
         </siteMapNode>
         <siteMapNode url="resources/default.aspx" title="Resources"  description="Resources" />
         <siteMapNode url="partners/default.aspx" title="Partners"  description="Partners" />
         <siteMapNode url="history/default.aspx" title="History"  description="History" />         
         <siteMapNode url="comments/default.aspx" title="Contact"  description="Contact" />
    </siteMapNode>
</siteMap>

CSS:



#nav {
  
  padding-left: 9px;
  }
  


#nav, #Menu1{
	  margin:-1px;
	  }


#nav a {
  color: #fff;
  text-decoration: none;
  border-left: 1px solid #959595;
  padding-left: 10px;
  display: block;
  width: 100%;
  padding: 2px 0 6px 8px; 
  }

#nav a:hover {
  text-decoration: underline;
   
}
#nav .important {
  border: none;
  background: 188px 10px url(../images/arr_orange.gif) no-repeat;
  }

#nav .important a {
  color: #E9C379;
 }


#Menu1{ z-index:10;}


#nav, #Menu1, .Level2Style{z-index:10;}
#nav, #Menu1, .Level3Style{z-index:10;}

hi amberhofler,

Do you try the other ie version(IE 7,IE8…)?

You can restore your IE settings to their original values, and the security level is down.

It works in IE8 and IE7.

To Happy Chen -MSFT. 

What do you mean by the security level is down? Is that why the menu links are being blocked in IE 10? The links everywhere else are working on the page.

hi amberhofler,

i check http://tinyurl.com/la5k7st again, it works in IE10 Compatibility View but  not work in IE10 mode.

For this particular problem, here is what ended up working:

.jqueryslidemenu .sub-menu .sub-menu { left: 208px !important; }

Please read the reference below for more information

http://mysitemyway.com/support/topic/ie-10-sub-menu-navigation-problem

i hope it helps you.

Accordion databind to sitemap

Is it possible to bind a sitemap to an accordion for a simple menu?

Chad

Hi

Please Take a look at the following thread :

http://forums.asp.net/t/1375571.aspx

If This Helps Please Mark as an Answer

Good Luck

Thank you for your response.  The thread you gave me helped me but was coded in VB.  I had to make a few changes for C#.  Below is my working example of an accordion databound to a sitemap in C#.

Thanks again,
Chad

********Default.aspx********
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<link href="Accordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<form id="form1" runat="server">
	<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
	</asp:ToolkitScriptManager>
	<asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true"
		FramesPerSecond="60" TransitionDuration="75" AutoSize="None" RequireOpenedPane="true"
		Width="350px" SuppressHeaderPostbacks="true" HeaderCssClass="AccordionHeaderCssClass"
		HeaderSelectedCssClass="accordionHeaderSelected" OnItemDataBound="Accordion1_DataBound">
		<HeaderTemplate>
			<div class="accordionHeader">
				<a href="<%# Eval("url") %>">
					<%#Eval("title")%></a>
			</div>
		</HeaderTemplate>
		<ContentTemplate>
			<div class="accordionContent">
				<table>
					<asp:Repeater ID="Repeater1" runat="server">
						<ItemTemplate>
							<tr>
								<td id="AccordionSideBarItem">
									<a href="<%# ((System.Web.SiteMapNode)Container.DataItem).Url %>">
										<%# ((System.Web.SiteMapNode)Container.DataItem).Title %></a>
								</td>
							</tr>
						</ItemTemplate>
					</asp:Repeater>
				</table>
			</div>
		</ContentTemplate>
	</asp:Accordion>
	<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
	</form>
</body>
</html>


**********Default.aspx.cs*********


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;


public partial class Default : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
        {
        if (!IsPostBack)
            {
            SiteMapDataSourceView siteMapView = (SiteMapDataSourceView)SiteMapDataSource1.GetView(string.Empty);
            SiteMapNodeCollection nodes = (SiteMapNodeCollection)siteMapView.Select(DataSourceSelectArguments.Empty);
            Accordion1.DataSource = nodes;
            Accordion1.DataBind();
            }
        }


    protected void Accordion1_DataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
        {
        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
            {
            AjaxControlToolkit.AccordionContentPanel cPanel = e.AccordionItem;
            System.Web.UI.WebControls.Repeater rptr = (Repeater)cPanel.Controls[1];
            SiteMapNode sNode = (System.Web.SiteMapNode)((AjaxControlToolkit.AccordionItemEventArgs)e).AccordionItem.DataItem;
            System.Web.SiteMapNodeCollection childNodes = sNode.ChildNodes;
            if (childNodes != null && childNodes.Count > 0)
                {
                rptr.DataSourceID = null;
                rptr.DataSource = childNodes;
                rptr.DataBind();
                }
            }
        }
    }


*********Web.sitemap*********


<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
	<siteMapNode url="~/default.aspx" title="HOME">


		<siteMapNode url="" title="WAYS TO EXPRESS LOVE" description="">
			<siteMapNode url="~/waysToExpressLove.aspx" title="THE FIVE LOVE LANGUAGES" description="" />
		</siteMapNode>


		<siteMapNode title="THE LORD'S PRAYER" description="">
			<siteMapNode url="~/expositionOfPsalms23.aspx" title="Exposition of Psalm 23" description="" />
		</siteMapNode>


		<siteMapNode title="ABOUT SIN" description="">
			<siteMapNode url="~/aboutSin.aspx" title="Link" description="" />
		</siteMapNode>


		<siteMapNode title="ABOUT JESUS CHRIST" description="">
			<siteMapNode url="~/theCrucifixion.aspx" title="The Crucifixion of Jesus Christ" description="" />
			<siteMapNode url="~/theGospel.aspx" title="The Gospel" description="" />
		</siteMapNode>


		<siteMapNode title="SPECIAL OFFERS" description="">
			<siteMapNode url="~/trinityLife.aspx" title="Trinity Life Insurance" description="" />
			<siteMapNode url="~/soulSecurity.aspx" title="Soul Security" description="" />
		</siteMapNode>
	</siteMapNode>
</siteMap>

 

I thought the Ajax Accordion was supposed to keep the viewstate if the header and content templates are used with a data source.  This is not the case for me.  I am using the header and content templates with a data source in a master page and the Accordion
does not keep it’s viewstate.  Does anyone have a suggestion to maintain viewstate?

Chad

Took several days
trying to implement a
three-tier
accordion
, connected
to the site map
, will they have an example
handy?, Please,
thank you very much
beforehand

Llevo varios dias tratando de implementar un acordeón de tres niveles, conectado al mapa del sitio, ¿Tendran un ejemplo a mano?, por favor, de ante mano muchas gracias

Thank you very much
for the reply,
but I can not implement
the three levels, my menu
has the following schema

Item A
     Item A.1
        Item A.1.1
        Item A.1.2
      Item A.2
        Item A.2.1
        Item A.2.2
Item B
      Item B.1
        Item B.1.1
        Item B.1.2
      Item B.2
        Item B.2.1
        Item B.2.2

Item C
     Item C.1
        Item C.1.1
        Item C.1.2
      Item C.2
        Item C.2.1
        Item C.2.2

and I have
implemented a
sitemap AspNetSqlSiteMapProvider
to recover, I’m desperate,
took
several days,
and I’m a
beginner, thanks
again

[RESOLVED]Menus

I am using Visual web developer 2008 Express.  I have a menu with a static top level and a dynamic second level.  When the dynamic level is displayed the background is always white.  How do I set the background and foreground colors for the dynamic menu
level? 

you can use below mark up to set the dynamic menu style.

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
            <DynamicMenuStyle BackColor="#000099" ForeColor="Bisque" />
        </asp:Menu>

Did you try:

<

 

 

 

 

<asp:Menu
ID="Menu1"
runat="server"

DynamicMenuItemStyle-BackColor="Black"

DynamicMenuStyle-ForeColor="White"

DynamicHoverStyle-BackColor="Red"

DynamicHoverStyle-ForeColor="#003399">

 

<Items>

 

<asp:MenuItem
Text="top1"
Value="top1">

 

<asp:MenuItem
Text="child1"
Value="child1"></asp:MenuItem>

 

</asp:MenuItem>

 

</Items>

 

</asp:Menu>

 

 

 

 

 

[RESOLVED]Questions on the Tab control

Could someone help me to better understand the Ajax control Toolkit Tab control.   In the past I have used the built in ASP.net "Menu" control with a "SiteMapDataSource" in a Master page and a "Web.sitemap file.  By using this configuration, I am able to
load a different page that is associated with the tab when the user clicks each tab.  ie:  when a user clicks on a tab it loads the page for that tab from the Web.sitemap file.  There are several nice things with this configuration.  First your html and code
behind are in seperate files per tab and second the tabs are lazy loaded.

My Question is this, is this same configuration possible with the Ajax Tab control or the JQuery tab control.  From what I have seen you have to code everything in the same page.  Is this the prefered way to do this?

Any help would really be appreaciated.  Examples greatly appreaciated!

Thanks  Dave.

[RESOLVED]Menu Navigation with SiteMaps

Hello…

I read the tutorial "Providing Website Navigation with SiteMaps" (http://www.asp.net/learn/mvc/tutorial-20-vb.aspx) and I think it is an example more for Custom Helpers than a Menu implementation.

It proposes hard-code all the structure of the menu. What if I want to add classs or if I want add an special item?

For my menu I use a User Control in my Site.Master.

This is te code of the User Control:

                <div id="nav">
                   
            <asp:Repeater runat="server" ID="siteMapAsBulletedList" DataSourceID="SiteMapDS">
                <HeaderTemplate>
                    <ul>
                        <li class="<%# SiteMap.RootNode["class"] %>"><a href="<%# SiteMap.RootNode.Url %>" title="<%# SiteMap.RootNode.Description  %>"><%# SiteMap.RootNode.Title %></a></li>
                </HeaderTemplate>
               
                <ItemTemplate>
                        <li class="<%# Eval("[class]") %>"><a href="<%# Eval("Url") %>" title="<%# Eval("description") %>"><%# Eval("title") %></a></li>
                </ItemTemplate>
               
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
            <asp:SiteMapDataSource ShowStartingNode="false" ID="SiteMapDS" runat="server" />
               
                </div>
                

And, at moment, it´s working. And no code behind or helpers. No compilation if some changes.

Well… As I´m not an expert, can you tell me if, in my new MVC project, it´s a good practice or I should use a custom helper.

Thanks
 

Hey,

In general you should avoid using runat="server" controls in MVC project. Of course they will usually work, unless you try to use features that depend on viewstate or postbacks. Still for pure rendering bases they can do, yet you really should depend on
helper extensions, in this case the helper extension methods would have to be provided by you and directly deal with html output rendering.

Maciej

+1 for not using web server controls (though we really need a mark up model for v2.0 of MVC)

 and +1 for not using sitemaps for anything but demo apps :)

Luis Abreu

+1 for not using web server controls (though we really need a mark up model for v2.0 of MVC)

 

Seeing contents of RC futures assembly, seems like its coming!

The namespace Microsoft.Web.Mvc.Controls contains some basic runat server MVC friendly controls, including form input controls and THE repeater. All of those are ViewData friendly [:D]

Maciej

I’ve spotted them though I still haven’t had a good look at them…

Thanks everybody..

But Luis.. then the recomendation is:

- For the Menu use a Custom helper (as tutorial does)?

- Don’t use SiteMaps… But it’s incredible… I’m working a site for production and I use for all navigation the SiteMap.. What are the problems with it?

Thanks!

 

Well…

I delete the Repeater and create a new navigation.

1. Create a base controller, so all my controllers have a common Menu:

    public class ApplicationController : Controller
    {

            #region ApplicationController
            public ApplicationController ()
            {
                ViewData ["DataSiteMap"] = dataSiteMap () ;
            }
            #endregion

   And I created a method (dataSiteMap) that returns a DataTable with all the info that my views need to construct the menu: name, description, url and class.

 

2. Put all my controllers to inherit from this base class:

public class HomeController : ApplicationController

 

3.  I create a ViewUserControl (in the VIEWS SHARED folder) with this MVC friendly code (hehehe.. no more repeater):

Code of  navigation.ascx:

<%@ Import Namespace="System.Data" %>
<div id="nav">
    <ul>
    <%  foreach ( DataRow itemMenu in (ViewData ["DataSiteMap"] as DataTable).Rows  )  {  %>
        <li class="<%= itemMenu["class"] %>"><a href="<%= itemMenu["url"] %>" title="<%= itemMenu["description"] %>"><%= itemMenu["name"] %></a></li>
    <%  }  %>
    <ul>
</div>

 

4. Finally I load the ViewUserControl in my Site.Master:

        <% Html.RenderPartial ("navigation" ) ; %>

 

Now:

- All my pages has the same menu.

- I don´t use a Repeater with Runat Server.

- And I have a menu with a easy to change HTML render.

 

Well.. What do you think? A good solution?

[RESOLVED]How do I move my ContentPlaceHolder in DesignMode?

How can I move my contentplaceholder to the upper righthand side? My source code is below.

ContentPlaceHolder

<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Triage Control Center</title>
    <link href="TriageStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="MasterPageForm" runat="server">
        <div id="master_header">
            <div id="master_headertop">
                <asp:HyperLink ID="HomePageLink" runat="server"
NavigateUrl="~/Default.aspx" ToolTip="Triage Control
Center">[HomePageLink]</asp:HyperLink>
            </div>
        </div>
        <div id="master_page">
            <div id="master_menu">
                <div class="sidebar">
                    <div class="sidebarheader">CLS Applications</div>
                    <div id="master_sidebarSamples" class="sidebarcontent">
                        <asp:Repeater ID="SamplesLinks" runat="server"
DataSourceID="SamplesSiteMap" EnableViewState="false">
                            <ItemTemplate>
                                <asp:HyperLink ID="SamplesLink"
runat="server" Text=’<%# Eval("Title") %>’ NavigateUrl=’<%# Eval("Url") %>’
                                    EnableViewState="false" /><br />
                            </ItemTemplate>
                        </asp:Repeater>
                        <asp:SiteMapDataSource ID="SamplesSiteMap"
runat="server" SiteMapProvider="SamplesSiteMap"
                            ShowStartingNode="false" />
                    </div>
                </div>
            </div>
            <div id="master_contentplaceholder">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
            <div id="master_contentfooter">Copyright © 2010
Test. All rights reserved.</div>
        </div>
    </form>
</body>
</html>

Just position your DIV to wherever you want using CSS positioning and then place the ContentPlaceHolder there.

<div>
      <div style=" width:200px; height:200px; background-color:Blue; left:0px; position:absolute; top: 0px;">
      FIRST DIV
      </div>
      <div style=" width:200px; height:200px; left:200px; position:absolute; top: -1px;">
      SECOND DIV<br />
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
      </div>
    </div>

[RESOLVED]SiteMap in ASP.Net

Hello All,

I want to create a Horizontal menu with options Home,Services,Consulting,support.

The menu should appear in horizontal and there will not be any root node or child node all node will be on single horizontal level.

How to write sitemap code for it ?

Such as :

Home    Services    Consulting   Support

 

Thanks in Advance,

Praneet

Hi,

You can use the below sitemap to create horizontal menu. Chane url as per your design

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="" title="RootNode" description="RootNode" roles="*">
    <siteMapNode url="~/Home.aspx" title="Home"  />
    <siteMapNode url="~/Services.aspx" title="Services"   />
    <siteMapNode url="~/Consulting.aspx" title="Consulting"  />
    <siteMapNode url="~/Support.aspx" title="Support" />
  </siteMapNode>
</siteMap>

You need to have a root node in your site map. so to remove the Root node you need to set the sitemap datasource
ShowStartingNode property to false

 <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"  ShowStartingNode="false" />

To make the Menu display as Horizontal you need to set the orientation of menu to be ‘Horizontal’

  <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticDisplayLevels="1" DataSourceID="SiteMapDataSource1" >
        </asp:Menu>

Complete Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticDisplayLevels="1" DataSourceID="SiteMapDataSource1" >
        </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"  ShowStartingNode="false" />
    </div>
    </form>
</body>
</html>

[RESOLVED]DIV size doesn't change according to the text/content

Hi All,

I have a Master page in which A root DIV–> 4 Parent DIVs –>3 DIVs in each parent div

<div class="page">
        <div class="header" style="background-image: url('Images/header.jpg')">
            <div class="title" >
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" >
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="midLayer">  ((((this is where the problem arise))))
            <div class="leftCol">
                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
            </div>
            <div class="centreCol">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
            <div class="rightCol">
                <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" />
            </div>
        </div>
        <div class="footer">
          <table style="width:100%">
            <tr style="width:100%">
                <td style="width: 30%; float: left"></td>
                <td style="width: 150px; float: left">
                <asp:HyperLink ID="HyperLink1" runat="server">about Us</asp:HyperLink><br />
                <asp:HyperLink ID="HyperLink2" runat="server">FAQ's</asp:HyperLink><br />
                </td>
                <td style="width: 30%; float: left"></td>
            </tr>
          </table>
        </div>
        <div class="footerCopyRight"> Copyright © 2013</div>
    </div>

The problem is when I have more text or any info in the content page it is over flowing to the next parent DIVs i.e footer and footerCopyRight

           <div class="centreCol">
                
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                
            </div>

Header

LeftCol

Content Page

Actual problem here

[if the records are more , it is over flowing to on top of the below footer n copyright footer.

Right Col

Footer  

Copyright footer

I want the page hight to change as per the lenght of the records in content page, but not to over flow on to the next tags.
I want the page size to increase and have scroo bar for the page, footer show always remain at the bottom of the page.
Please help me. 
Here are the css styles used for the DIVs
.midLayer
{
    position: relative;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    /* additional*/
    min-height: 575px;
    height: 100%;
}
.leftCol
{
    padding: 10px 0px 0px 10px;
    margin: 0px 0px 0px 0px;
    width: 200px;
    min-height: 565px;
    float: left;
    /* additional
    position: relative;
    border-bottom: 1px solid black;*/
    border-right: 1px solid black;
    height: 100%;
}
.centreCol
{
    padding: 5px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
    min-height: 575px;
    width: 825px;
    float: left;
    border-bottom: 0px solid green;
    height: 100%;
}
.rightCol
{
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 200px;
    min-height: 565px;
    float: left;
    /* additional
    position: relative;*/
    border-left: 1px solid black;
    height: 100%;
}


try to set overflow:auto in midlayer and clear:both for footer.

Perfect, Thank you.

Can you also help how to get lok and feel for the table.

I am trying to build somthing like ESHOP template

http://www.beautifullife.info/web-design/25-best-free-online-stores-templates/

Right hand side you can see ENTRY & Latest NEWS  box with a feel good look.

How do I get that?