How Do I get buttons Side by Side in ASP.NET MVC when they each have a div?

Question

This is my code but everything lines up on the left side of the header and I can't seem to find anything that will change the layout. Do I need to add parameters to the div or do I need to use float? Thanks in advance.

<div class="dropdown"> 
                 <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Home
              </button>
            </div>

            <div class="dropdown" style="float: right">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Our Company
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown 1" href="#">Our History</a>
            <a class="dropdown 2" href="#">Facilities</a>
        </div>
        <div class="dropdown">
            <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Employee Services
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown" href="#">Forms</a>
                <a class="dropdown" href="#">Pay Stubs</a>
                <a class="dropdown" href="#">Employee Handbook</a>
            </div>
            <div class="dropdown">
                <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Tickets
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown 1" href="#">IT Service Ticket</a>
                    <a class="dropdown 2" href="#">Purchasing Ticket</a>
                    <a class="dropdown 3" href="#">Maitenence Ticket</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I have created this in a Bootply. I definitely think there were some HTML formatting issues that caused this problem.

There were closing </div> tags that were missing, but anyways here is your code rewritten to fit what you're trying to achieve.

<div class="row">
    <div class="dropdown col-md-2"> 
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Home
        </button>
    </div>

    <div class="dropdown col-md-2">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Our Company
        </button>
        <div class="dropdown-menu col-md-2" aria-labelledby="dropdownMenuButton">
            <a class="dropdown 1" href="#">Our History</a>
            <a class="dropdown 2" href="#">Facilities</a>
        </div>
    </div>
    <div class="dropdown col-md-2">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Employee Services
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown" href="#">Forms</a>
            <a class="dropdown" href="#">Pay Stubs</a>
            <a class="dropdown" href="#">Employee Handbook</a>
        </div>
    </div>
    <div class="dropdown col-md-2">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Tickets
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown 1" href="#">IT Service Ticket</a>
            <a class="dropdown 2" href="#">Purchasing Ticket</a>
            <a class="dropdown 3" href="#">Maitenence Ticket</a>
        </div>
    </div>
 </div>

Bootstrap Grid System is definitely the way to go for you.

Let me know if this helps.

Answer 2

You could use bootstrap's grid system. It can make it a lot easier than handling a lot of floats and make the mobile representation cleaner as well.

<div class="row">
  <div class="col-md-6">
    <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Home
    </button>
  </div>

  <div class="col-md-6">
    <div class="col-xs-4">
      <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 100%">
        Our Company
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown 1" href="#">Our History</a>
        <a class="dropdown 2" href="#">Facilities</a>
      </div>
    </div>
    <div class="col-xs-4">
      <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 100%">
        Employee Services
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown" href="#">Forms</a>
        <a class="dropdown" href="#">Pay Stubs</a>
        <a class="dropdown" href="#">Employee Handbook</a>
      </div>
    </div>
    <div class="col-xs-4">
      <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 100%">
        Tickets
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown 1" href="#">IT Service Ticket</a>
        <a class="dropdown 2" href="#">Purchasing Ticket</a>
        <a class="dropdown 3" href="#">Maitenence Ticket</a>
      </div>
    </div>
  </div>
</div>

Dropdowns aren't working here -- but they were not working in the original either for me. If anyone can suggest an edit for that, I'd appreciate it.