title: How float divs to two sides in razor view
body: <p>I'm trying to view notifications on razor view. I used foreach loop to get the data from the model.I want to display both "invitations" and "Requests" divs on the view like in the two table columns.One invitation down after another invitation.one request down after another request..(in one column all the invitations and requests on the other).. i used css float to do this.. but in the divs get mix in the result..why is that? there are some othaer elements in the view like, nav bar,side bar etc...my code is as follows;</p>
  
  <pre><code> foreach (var item in Model)
      {
  
  
  
          if (@item.CreatedBy == item.UserId)
          {
      &lt;div style="float: right; width: 580px;"&gt;
  
          &lt;div class="panel panel-info" style="width:500px;margin-right:50px"&gt;
              &lt;a href="#" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/a&gt;
              &lt;div class=" panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Notification @counter1&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;Event is created by yourself .Budget of the event is @item.Budget &lt;p&gt;
  
                      @if (item.IsAccepted)
                              {
                      &lt;p&gt;You have accept the invitation!!!&lt;/p&gt;
                              }
  
                      @if (!item.IsAccepted)
                              {
                          &lt;p&gt;You haven't accept the invitation yet!!!!&lt;/p&gt;
                              }
  
                      @{counter1++;}
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;
          &lt;/div&gt;
  
          }
  
  
      else
  
      {
      &lt;div style="width: 580px; float: left"&gt;
          &lt;div class="panel panel-info" style="width:500px;margin-left:250px;"&gt;
              &lt;a href="#" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/a&gt;
              &lt;div class=" panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Notification @counter2&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;Event is created by @item.Email .Budget of the event is @item.Budget &lt;p&gt;
  
                      @if (item.IsAccepted)
                      {
                      &lt;p&gt;You have accept the invitation!!!&lt;/p&gt;
                      }
  
                      @if (!item.IsAccepted)
                      {
                          &lt;p&gt;You haven't accept the invitation yet!!!!&lt;/p&gt;
                      }
  
                      @{counter2++;}
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;
          &lt;/div&gt;
          }
  
      } 
  </code></pre>