ASP Menu float property is not working

Question

I have an asp menu, I want to float it to left so the element after it can come to its right side (beside) it. I've set a CssClass for the Menu and added float: leftto it, but it is not working. I've even changed the float:left to float:right to see if it will work or not, but nothing worked.

Here is my code:

 <form id="form1" runat="server">
        <div class="wrapper">
        <div class="navbar">


        /*some code*/

     </div>

    <div class="middle"> 



    <asp:Menu ID="MenuRec" runat="server" CssClass="recFriends">
         <Items>
            <asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
            <asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>

        </Items>

         <Items>
            <asp:MenuItem Text=" Item1"  Selectable="false"></asp:MenuItem>
            <asp:MenuItem Text=" Item2"  Selectable="false"></asp:MenuItem>
             <asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
        </Items>
    </asp:Menu>



          <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            <!--here goes the customized content--> 
        </asp:ContentPlaceHolder>

  </div>
     <div class="footer">

    </div>
</div>
</form>

</body>

My CSS:

.recFriends {

    float:left;  
    padding-top:1em;
    color:#003366; 
    font-weight:normal;
    font-style:italic; 
}

controls inside the ContentPlaceHolder (which will be in a page that inherits from this master page) must come to the right of the menu, but these are coming below it instead.

I've searched a lot, but nothing worked, I've even checked the solutions available here:

CssClass is not working for my asp menu - all code attached

asp Menu control not floating properly

Can anyone tell me how to solve this problem?

Thank you.

have you tried adding float: left to your contentPlaceHolder too? — SheppardDigital, Nov 11 '15 at 16:21
@Lal yes, I've written !important just beside the float property, but it didn't work. Can you please tell me what solutions may solve this problem? Thanks — Dania, Nov 11 '15 at 16:23
could you please reproduce the issue in a fiddle or something like that.. — Lal, Nov 11 '15 at 16:23
@SheppardDigital contentPlaceHolder doesn't take a CssClass property, nor the content control which inherits it has a CssClass, so how can I add it? Thanks. — Dania, Nov 11 '15 at 16:24
You could maybe add a div around your content placeholder and give it a class? — SheppardDigital, Nov 11 '15 at 16:26
put your codes in jsfiddle.net..and share the link with us..so that we can debug it.. — Lal, Nov 11 '15 at 16:27
@SheppardDigital yes, I've tried that, but it didn't work, this solution was provided in another question, but it didn't work in my case. — Dania, Nov 11 '15 at 16:27
@Lal, thanks I appreciate this, but unfortunately I can't share the entire code, because it's confidential. I can only share a small portion like the one provided in the question. Is there any other solution? — Dania, Nov 11 '15 at 16:29
yes thats it,..just add the relevant code to reproduce this issue..please dont add the full code. — Lal, Nov 11 '15 at 16:30
@SheppardDigital I added a dive around the ContentPlaceHolder and give it a class with float left, but it didn't work. — Dania, Nov 11 '15 at 16:32
@Lal, thanks, I added this portion to fiddle.net, clicked run, but there was no result shown. — Dania, Nov 11 '15 at 16:35
@Lal So shall I remove the asp menu tag? I removed that and place it with h1 for testing purposes, the result is that the first h1 comes bellow the second one! the float was not considered in the result. — Dania, Nov 11 '15 at 16:37
is [this](http://jsfiddle.net/lalu050/6f1bpLc5/1/) what you are trying to achieve? — Lal, Nov 11 '15 at 17:18
@Lal, yes but I applied the same concept you provided, once for the contentplaceholder and once for the content in the child page, but it didn't work, it's ok, I will try to add some space at the top margin of the menu so it can be at the same level of the other control. Thank you for your help. — Dania, Nov 11 '15 at 17:45
Good...:) carry on...just to remind you, please use the `inspect element` utility of your browser to find the computed styles and check if any margins or paddings are being applied. — Lal, Nov 11 '15 at 17:47

Moe · Accepted Answer · 2015-11-11T18:46:51.683

1

Wrap your menu in a div and close the div before the content place holder. Move your CSS class from the menu to the container div.

HTML

  <div class="recFriends">
            <asp:Menu ID="MenuRec" runat="server">
                <Items>
                    <asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
                    <asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>

                </Items>

                <Items>
                    <asp:MenuItem Text=" Item1" Selectable="false"></asp:MenuItem>
                    <asp:MenuItem Text=" Item2" Selectable="false"></asp:MenuItem>
                    <asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
            <!--here goes the customized content-->
        </asp:ContentPlaceHolder>

CSS

 .recFriends {
        float: left;
        padding-top: 1em;
        color: #003366;
        font-weight: normal;
        font-style: italic;
        width: 20%;
        padding-left: 2em;
    }

edited Nov 11 '15 at 18:46

answered Nov 11 '15 at 16:40

Moe

1,599
11
16

thanks, what is #MainContent_MenuRec a? and where shall I place it? Can you please elaborate more? Do you mean I should have the CSS like this, .recFriends a? – Dania Nov 11 '15 at 16:42
1

The #MainContent_MenuRec A is the default css class for the asp menu. You can override the CSS as described in the answer. I've also attached a sample. – Moe Nov 11 '15 at 16:44
thank you for this clear answer, but this is not what I want to do. I used the code you provided and it didn't work. I don't want to place the items to the right of the menu, I want to place the ContentPlaceHolder to the right of the menu, any suggestions? Thank you. – Dania Nov 11 '15 at 16:48
Sorry I didn't get that. Do you need the content of pages to be placed to the right of the Menu? BTW. if you are adding your style in a master page the class should be "MenuRec a" instead of MainContent_MenuRec a – Moe Nov 11 '15 at 16:57
In the code in the question, there is a ContentPlaceHolder asp tag, this tag will be associated to an asp content tag in the page that will inherit from this master page. I want whatever contents in the content tag in the child page to be to the right of the menu in the master page. I would appreciate any help. – Dania Nov 11 '15 at 17:01
Would you check the answer again. Is the last image is what you are trying to achieve. – Moe Nov 11 '15 at 17:07
Moe, I tried your method, it worked very well! Thanks a lot. – Dania Nov 12 '15 at 15:48

ASP Menu float property is not working

1 Answers1