Having trouble with my website? Having problems aligning two divs - php

Question

So i'm at the point where I feel like quitting, because of all the trouble this problem has given me. So if anyone could help me out that'd be great :D!
So on my website what I want to do is have a div box to the left of the website, where there will be a "Learn more" link that will take you to another page explaining what my website is about, I would also like there to be a video right below it (It will be of me explaining my website)
On the other div box I want there to be a "Sign Up form" a basic sign up form for users to sign up for my website
Now my problem isn't getting the boxes or sign up sheet aligned side by side.
Right now my problem is the alignment of the top of the boxes. When I put "float:left;" it aligned them side by side(exactly Like I wanted)
However one of the top borders of the box is higher up then the other
For example this is my website so far http://www.shoportrade.org/
As you can see the boxes don't align perfectly from the top of the border, one is lower then the other
I want it to look sorta like this http://www1.picturepush.com/photo/a/12506959/640/12506959.png
Could anyone help me? I've hit a wall and I really wanna figure this problem out.

Answer 1

I don't know why you have all the break tags, but this is what your syntax needs to be like:
<div id="header">
</div>
<div id="container">
<div class="ex">
</div>
<div class="myform">
</div>
<div class="clear"></div>
</div>
Your header would stay the same way. Your container needs to wrap both boxes. Usually this is center aligned on the page with this CSS:
.container { width:980px; margin: 0 auto; }
Your .ex class would stay the same (float: left;) and your .myform class would also stay the same (float: left;).
The .clear class takes care of helping the browser calculate the final display height and usually looks like:
.clear { clear: both; height: 1px; }

Answer 2

This is because you have <br>'s after your <div id="myform">.

Answer 3

first of all, there is some mistakes in your coding. Like
<div id='header'></a href='http://www.shoportrade.org/'><img src='mylogo1.png'></img></a>
should be
<div id='header'><a href='http://www.shoportrade.org/'><img src='mylogo1.png' /></a></div>
I believe you are declaring class myform in <style>, but I saw in your code you're trying to implement this <div id="myform">, which is totally wrong. It should be <div class="myform">. If you're actually want to implement different style for that div then I think you should use different id name like <div id='boxstyle'></div>

Answer 4

Here is a method without using floats. The heights of the two boxes will change depending on the container height.
If you want the heights of the boxes to be different, change their "bottom" value.
http://jsfiddle.net/Calum/m783T/
CSS
#container {
height: 500px;
width: 800px;
position: relative;
background-color: green;
}
#box, #box2 {
position: absolute;
top: 50px;
width: 200px;
}
#box {
background-color: blue;
left: 50px;
bottom: 50px;
}
#box2 {
background-color: red;
right: 50px;
bottom: 50px;
}
HTML
<div id="container">
<div id="box">
<p>This is box 1</p>
</div>
<div id="box2">
<p>This is box 2</p>
</div>
</div>