Simple RadMenu DIV Question

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    6 posts
    Member since:
    Dec 2008

    Posted 18 Nov 2014 Link to this post

    I have a web form using Visual studio 2012. On this form, I have two DIV's. One DIV has a RadMenu and the other DIV has some text. I wanted to put some space in between the text and the RadMenu but I cannot seem to make it work using DIV properties margin and/or padding.

    I know there is an easy way to do this but I need to use the margin attributes to make it work. The design time view looks perfect but when I run using IE or Chrome the margin-top property for the second DIV is above the RadMenu.

    Is this a case where the RadMenu is being rendered at the end?

    Here is my test code (there is no code behind):

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

    <!DOCTYPE html>

    <html xmlns="">
    <head runat="server">
    background-color: lightyellow;
    text-align: left;
    display: block;

    background-color: lightblue;
    text-align: left;
    margin-bottom: 15px;
    margin-top: 15px;
    display: block;
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <div class="cssPageDivMenu">
    <telerik:RadMenu ID="RadMenuPage" runat="server" Width="100%">
    <telerik:RadMenuItem runat="server" NavigateUrl="~/a.aspx" Text="A Page">
    <telerik:RadMenuItem runat="server" NavigateUrl="~/b.aspx" Text="B Page">
    <div class="cssPageDivTitle">
    Page Title
  2. Magdalena
    Magdalena avatar
    411 posts

    Posted 21 Nov 2014 Link to this post

    Hello Ryan,

    As the RadMenu in classic render mode is floated, it is necessary to clear them by applying the following styles to its parent
    .cssPageDivMenu:after {
        content: "";
        display: block;
        clear: both;
    .cssPageDivMenu {
        zoom: 1;

    The other solution is to remove floating from the RadMenu
    html .RadMenu {
        float: none;

    Do not hesitate to contact us if you have other questions.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top