0

I am having a lot of trouble lining up two divs. One is a twitter timeline box and the other a contact input box. Right now it looks like this: Not lining up divs page

The body is set to 1020px, the page in HTML is the following:

<div class="half" id="contact-info">
<h3>Contact Us</h3>
<p>Feel free to ask us any questions, send us any opportunities or pitch us your winning idea. There are infinite ways to play!</p>

<a class="twitter-timeline" href="https://twitter.com/8PlayerPictures" data-widget-id="450740338580140032">Tweets by @8PlayerPictures</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>    
</div>

<div class="half">
[contact-form-7 id="121" title="Contact form 1"]
</div>

the code for the half div is here:

.half  { width: 50%; margin: 0; display:inline-block; }

this is the CSS. I tried playing with float, inline-block, margins.. pretty much all I can fathom. I'm still very new at this and could really use some pointers.

#contact-info {
color: #444;
line-height: 28px;
font-weight: 200;}

.twitter-timeline {
margin-top: 15px;
float: left;
clear:both;
width: 100%;

}


#wpcf7-f22-p5-o1 {
width: 100%;
display: inline-block;
text-align: center;
height: 500px;
border: 2px solid rgb(42,199,239);
/*background-color: rgba(42, 199, 239, .8);*/
/*background-color: rgba(128, 199, 242, 1);*/
background-image: url(http://i.imgur.com/QIXENNf.png);
border-radius: 3px;
}

How do I get these two divs to line up? What am I doing wrong here?

Francesca
  • 1

2 Answers2

1

The first thing I want to point is :

Reason: space between inline-block elements

Both of the .half elements has a width of 50%, and the space between them also has a small width. Therefore the total width will bigger than 100%. That's why the two elements don't line up.

Some extra work is needed to remove space between inline-block element if you persist on using inline-block. Here You can get more information -> How to remove the space between inline-block elements?

Solution

Choose a way to solve this problem, and the first one is recommend.

  • Float

    Adding float: left; to .half class will make things work in a pretty easy way.

  • Inline-block

    At first, remove space between inline-block elements as described above.

    Then make sure the two elements are top-aligned if you need that. And adding vertical-align: top; to .half class will help.

    At last, this way is not recommended. I just raise a possible way that solves problem.

Community
  • 1
  • 1
Miaonster
  • 1,392
  • 2
  • 15
  • 29
0

in .half class, add float: left;.

Mahozi
  • 353
  • 2
  • 10