user938363 user938363 - 8 days ago 5
CSS Question

How to put two divs on the same line with CSS in simple_form in rails?

Putting two divs on the same line is an old question. But I can't find a solution when working with simple_form in rails. What I want to do is to display content and its label on the same line. The width of the label is 125px (

.left
) and the content is on the right (
.right
). The text in the label is aligned to the right and the text in content is aligned to the left.

Here is the HTML:

<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="left">Proj Name:</div>
<div class="right">must have a name</div>
<div class="input string required">


Here is the CSS:

.simple_form div.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}

.simple_form div.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}


However, in the result, there is a linebreak, like so:

Proj Name:
must have a name


The erb code of the simple form is:

<div class="left">Proj Name:</div><div class="right"><%= @project.name %></div>


I don't want to use a table but CSS only to solve the issue.

Answer

Your css is fine, but I think it's not applying on divs. Just write simple class name and then try. You can check it at Jsfiddle.

.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline;
}

.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline;
}
Comments