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.
This question is related to
html
css
ruby-on-rails
erb
simple-form
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;
}
why not use flexbox ? so wrap them into another div like that
.flexContainer { _x000D_
_x000D_
margin: 2px 10px;_x000D_
display: flex;_x000D_
} _x000D_
_x000D_
.left {_x000D_
flex-basis : 30%;_x000D_
}_x000D_
_x000D_
.right {_x000D_
flex-basis : 30%;_x000D_
}<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">_x000D_
<div style="margin:0;padding:0;display:inline">_x000D_
<input type="hidden" value="?" name="utf8">_x000D_
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">_x000D_
</div>_x000D_
<div class="flexContainer">_x000D_
<div class="left">Proj Name:</div>_x000D_
<div class="right">must have a name</div>_x000D_
</div>_x000D_
<div class="input string required"> </div>_x000D_
</form>feel free to play with flex-basis percentage to get more customized space.
You can't float or set the width of an inline element. Remove display: inline; from both classes and your markup should present fine.
EDIT: You can set the width, but it will cause the element to be rendered as a block.
Source: Stackoverflow.com