ASP Menu float property is not working - html

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.

Answer 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;
}