CSS placing image by a form

Question

I want an image to appear right beside a form. This is what I am 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) do |f| %>

        <%= render 'shared/error_messages', object: f.object %>
            <fieldset>
                <legend> Enter your best details</legend>

                <%= f.label :name %>
                <%= f.text_field :name, :placeholder => "John Doe" %> </br>

                <%= f.label :email %>
                <%= f.text_field :email, :placeholder => "[email protected]" %></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 your 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="[email protected]" 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 you got to my live site, you see the image is way above the form. What could I have done wrong? https://infinite-oasis-2303.herokuapp.com/investors/new

Answer 1

The CSS display:inline is being applied on the container, not on it's elements. One approach is to just float the <img> using class=left and move it alongside the <form>, inside the centered div.

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

Answer 2

For div which contains the classes "small-6 large-centered columns" needs to have the css as

display: inline-blcok;

Either you can add a new class to add the above css or you can make use of inline to that div.

And for the image, the following css needs to be updated.

.il img{
   vertical-align: top;
}

Answer 3

This div takes up the whole width:

<div class="small-6 large-centered columns"> 

So even with the display:inline-block it spills to another line. What you'll have to do is move the img inside that div like so:

<div class="small-6 large-centered columns">    
    <img alt="Forex Money Manager" src="/assets/successful_forex_trader-a46ac55676d8bd8789095d2e5ebbef0c588692b25c6d8d3da51b32efa6fd2435.jpg" />
    <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==" />

After this, you'll also have to make the form class new_investor display: inline-block. This should put the image next to the form.

After this, there's likely two other things you need to clean up:

1. Your img tag has vertical-align: middle on it, not sure if that's intentional
2. The middle column won't grow when you move the img into it, so you will probably want to resize it now that it has more content.