html - CSS placing image by a form -


i want image appear right beside form. have tried.

css file:

.il {     display:inline;     padding: 0px;     margin: 0px; } 

new.html.erb

<div class="il"> <%= image_tag("successful_forex_trader.jpg", :alt => "forex money manager") %>     <div class="small-6 large-centered columns">         <%= form_for(@investor) |f| %>          <%= render 'shared/error_messages', object: f.object %>             <fieldset>                 <legend> enter best details</legend>                  <%= f.label :name %>                 <%= f.text_field :name, :placeholder => "john doe" %> </br>                  <%= f.label :email %>                 <%= f.text_field :email, :placeholder => "you@example.com" %></br>                  <%= f.label :country %>                 <%= f.text_field :country %></br>                  <%= f.label :phone %>                 <%= f.text_field :phone, :placeholder => "" %></br>                  <%= f.submit "i'm interested!", :class => 'button radius' %>             </fieldset>         <% end %>      </div> </div> 

generated html code:

 <div class="il"> <img alt="forex money manager" src="/assets/successful_forex_trader-a46ac55676d8bd8789095d2e5ebbef0c588692b25c6d8d3da51b32efa6fd2435.jpg" />     <div class="small-6 large-centered columns">         <form class="new_investor" id="new_investor" action="/investors" accept-charset="utf-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="n10hveopkqjz0n5llhzgpo7hlgiuhoogfwofw28sokn9/ywrtflzc5+8bfl0ywy0gostdirj+6gmlb7wha==" />               <fieldset>                 <legend> enter best details</legend>                  <label for="investor_name">name</label>                 <input placeholder="john doe" type="text" name="investor[name]" id="investor_name" /> </br>                  <label for="investor_email">email</label>                 <input placeholder="you@example.com" type="text" name="investor[email]" id="investor_email" /></br>                  <label for="investor_country">country</label>                 <input type="text" name="investor[country]" id="investor_country" /></br>                  <label for="investor_phone">phone</label>                 <input placeholder="+48111111111" type="text" name="investor[phone]" id="investor_phone" /></br>                  <input type="submit" name="commit" value="i&#39;m interested!" class="button radius" />             </fieldset> </form>          </div> </div> 

but when got live site, see image way above form. have done wrong? https://infinite-oasis-2303.herokuapp.com/investors/new

the css display:inline being applied on container, not on it's elements. 1 approach float <img> using class=left , move alongside <form>, inside centered div.

<div class="small-9 large-centered columns">     <%= image_tag("successful_forex_trader.jpg", :class => 'left', :alt => "forex money manager") %> <%= form_for(@investor) |f| %> 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -