ASP.Net web page stacking xml documents instead of showing side by side, CSS issue?

I have a basic asp.net web page. I have a menu bar divided into 3 columns. Each column displays an xml file. However instead of showing them side by side it displays them one on top of each other. i think it might be to do with my css?

My asp.net web code:

<div class="menubar">

        <div class="menuleft">
            <asp:ContentPlaceHolder ID="menubarleft" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        <div class="menucenter">
            <asp:ContentPlaceHolder ID="menubarcenter" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        <div class="menuright">
            <asp:ContentPlaceHolder ID="menubarright" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        </div>

My css code:

div.menuleft
{
    float: left;
    width:30%;
    text-align:left;
}

div.menuright
{
    float: right;
    width:30%;
    text-align:right;
}

div.menucenter
{
    float: left;
    width:auto;
    text-align:center;
}

Answers


I think you want to make the following changes to your css:

div.menuright should be float:left instead of right and div.menucenter should have a percentage width (width: 30%).

Hope this helps.


Have a look, Here is the solution I added one div to clear the float effect and I modified you stylesheet :

<div class="menubar">

    <div class="menuleft">
        <asp:ContentPlaceHolder ID="menubarleft" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <div class="menucenter">
        <asp:ContentPlaceHolder ID="menubarcenter" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <div class="menuright">
        <asp:ContentPlaceHolder ID="menubarright" runat="server">
        </asp:ContentPlaceHolder>
    </div>
       <div class='clear'></div>
    </div>

And your new stylesheet

   div.menubar{
    width:100%;/*or width:1024px; according to your page*/
   }
   div.clear{
      clear:both;
   }

 div.menuleft
 {
    float: left;
    width:30%;
  /*  text-align:left;*/
 }

div.menuright
 {
    float: right;
    width:30%;
    /*text-align:right;*/
 }

 div.menucenter
 {
   float: left;
    width:auto;/*not auto*/
   max-width:39% /* 100%-30%-30%=40% but you'd better put 39%*/
   /* text-align:center;*/
 }

Need Your Help

How to use Hogan in django template

javascript python django hogan.js

Is it possible to include the following in my django html file?

Get Localized / Unlocalized style names in Word (VSTO)

ms-word vsto

I have a word Add-In and need help dealing with style names.