It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, they stubbornly refuse to budge:
<div class="form">
<%= form_for(@newevent) do |f| %>
...
<div>
<h2>Who's involved?</h2>
<div class = 'sidebyside'>
<div id = "left-calendar-wrapper">
<%= render partial: '/calendars/show', locals: {} %>
</div>
<div id ="right-calendar-wrapper">
this gets filled in by a javascript render in a js.erb file
</div>
</div>
</div>
...
</div>
This is the CSS I'm currently using:
.sidebyside {
float: left;
}
#left-calendar-wrapper {
float: left;
}
Is it at all possible to achieve this layout with rendered partials? Any assistance on this matter would be greatly appreciated.