0

I am having problems getting .contact-form-container and .contact-information div's to align at the top on full screen mode. Mobile works well. Please take a look at the DEMO and resize the preview window to see the undesired result.

https://jsfiddle.net/ruvqwoc0/

Thanks Again

isherwood
  • 58,414
  • 16
  • 114
  • 157
ShadowLine
  • 29
  • 6

3 Answers3

2

Inline-block element align at the baseline of the row by default. You can change that:

.contact-form-container {
    vertical-align: top;
}

Demo

isherwood
  • 58,414
  • 16
  • 114
  • 157
1

You can add float:left; to both .contact-form-container and .contact-information.

You will also need to remove the class clearfix from contact-form-container but leave it on .footer-container

This will cause them to float on the same line.

demo

sricks
  • 409
  • 2
  • 16
  • why removing the clearfix from the parent of 2 floated elements ? take a look at this [What is clearfix](http://stackoverflow.com/questions/8554043/what-is-clearfix) – Joel Almeida Apr 07 '15 at 16:07
  • Actually you would want `clearfix` applied to the containing `div` here since both are child elements are being floated. Since floats taken elements out of the document flow, `clearfix` prevents the parent element from collapsing. – Hynes Apr 07 '15 at 16:09
  • You would want to keep it on the parent container - which is `.footer-container`. However, he also has clearfix already on the `.contact-form-container` which is just a wrapper around the form, not a parent element on top of that. Edited my answer and put a demo to make it more clear. I think float:left is the right solution for a mobile responsive site like this. – sricks Apr 07 '15 at 16:12
0

You should close the top div tag sooner, and it will work like you want it 

<div class="footer-container clearfix">
  <form action="" method="POST" id="ContactForm" class="contact-form-container clearfix">
  <input id="Name" class="name" name="name" placeholder="Name" type="text"></input>
  <input id="Email" class="email" name="email" placeholder="Email" type="text"></input>
  <textarea id="Message" class="message" name="message" placeholder="Message"></textarea>
  <button type="submit" id="Submit" class="submit">Send</button>
</form>    </div>  
<div class="contact-information">
    <p class="headquarters">Headquarters</p>    
    <p>57507sf RR#215</p>
    <p>Box 311</p>
    <p>Redwater, Alberta, T0A 2W0</p>
    <p>Canada</p>
    <p>(780) 942-299sadfsafa4</p>


<p class="copyright">COPYRIGHT © R&amp;F MILLWORKS 2015</p>     
 </div>

Looks like I didn't understand the question quite right. Adding float:left to .contact-form-container fixes it

geekybastard
  • 61
  • 9