CODEWITHSUNDEEP
htmlcssforms
kdm
kdm

Reputation: 35

How to make contact form float to the left of text?

I want to make a contact form float to the left of an area of text. How do I do this? I've tried the float property but it isn't working for the sites div content area.

This is the HTML to the entire 'Contact' page:

<header class="product_header page_header">
<h1>Contact</h1>
<span class="dash"></span>            
</header>

<section id="page_body">

{% if contact.sent %}
<p id="thank_you">Your message has been sent and we will try to respond within 24  business hours.</p>      
{% else %}      

{% if twitter_username != blank or facebook_username != blank %}
<ul id="contact_links" class="{% if intro_paragraph == blank %}no_intro{% endif %}">
{% if theme.twitter_username != blank %}
  <li><a href="http://twitter.com/{{ theme.twitter_username }}" title="Follow us on Twitter">Twitter</a></li>
{% endif %}
{% if theme.facebook_username != blank %}
  <li><a href="http://facebook.com/{{ theme.facebook_username }}" title="Friend us on Facebook">Facebook</a></li>
{% endif %}
</ul>
{% endif %}

<form id="contact_form" method="post" action="/contact">
<ul>
<li>
<label>Your name</label>
{{ contact | contact_input: 'name' }}
</li>
<li>
<label>Your email</label>
{{ contact | contact_input: 'email' }}                 
</li>
<li>
<label>Subject</label>
{{ contact | contact_input: 'subject' }}
</li>
<li>
<label>Message</label>
{{ contact | contact_input: 'message' }}
</li>
<li id="captcha_img">
<label>Are you human? Enter the characters from the image</label>
<div id="captcha_phrase">{{ contact.captcha }}</div>                
{{ contact | contact_input: 'captcha' }}       
</li>
</ul>
<button id="contact_button" type="submit" name="submit" class="button">Send Message</button>            
</form>
{% endif %}
</section>

Anybody wanna' help me out with this?

Upvotes: 0

Views: 1473

Answers (2)

jhunlio
jhunlio

Reputation: 2660

use float and add width of each container:

html

<div id="formWrap">
    FORM FIELDS
</div>

<div id="textWrap">
    TEXT
</div>

css:

#formWrap {
  float:left;
  width:50%
}

#textWrap{
  float:Right;
  width:50%
}

Upvotes: 0

Nikita Silverstruk
Nikita Silverstruk

Reputation: 1117

Use float: left;. Here is a fiddle: http://jsfiddle.net/ay8Ay/

HTML:

<div id="frm">
    FORM FIELDS
</div>

<div id="text">
    TEXT
</div>

CSS:

#frm, #text { float: left; margin: 15px; border: 1px solid black; }

Just follow the same pattern..

Upvotes: 1

Related Questions