huge gap between two divs, divs wont align next to each other.

I've looked for this in the search and can't find an answer, either that or I didn't understand it, it's probably a rookie mistake but I'm just not seeing it. Basically I've got two columns of divs side by side and there is a decent gap between the two... in addition to that they won't line up. I had them next to each other before but messed it up. I can't even begin to imagine what the problem is so heres some code (i will be making a style sheet, so don't freak out, and I know it needs a bit more organization. Thanks in advance.

     <style type="text/css">
.body_titles {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
    width:640px;
}
.body_content {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    overflow:hidden;
    width:640px;
}
#column_left_container {
    float:left;
    width:640px;
}
#content_tab_top_left {
    background-image:url(../img/container_top.jpg);
    background-repeat:no-repeat;
    height:335px;
    width:640px;
}
#content_tab_center_left {
    background-image:url(../img/container_center.jpg);
    background-repeat:no-repeat;
    height:311px;
    width:640px;
}
#content_tab_bottom_left {
    background-image:url(../img/container_btm.jpg);
    background-repeat:no-repeat;
    height:300px;
    width:640px;
}
#padding_div1 {
    padding:2px;
    width:640;
}
#column_right_container {
    float:right;
    width:300px;
}
.body_titlesRIGHT {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
    width:300px;
}
.body_contentRIGHT {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    overflow:hidden;
    width:300px;
}
#content_tab_top_right {
    background-image:url(../img/container_top.jpg);
    background-repeat:no-repeat;
    height:335px;
    width:300px;
}
#content_tab_center_right {
    background-image:url(../img/container_center.jpg);
    background-repeat:no-repeat;
    width:300px;
}
#content_tab_bottom_right {
    background-image:url(../i开发者_运维问答mg/container_btm.jpg);
    background-repeat:no-repeat;
    width:300px;
}
#padding_div2 {
    padding:2px;
    width:300px;
}
</style>
<div id="body_container"> 
    <div id="columnn_left_container" style="display:inline-block">
        <div id="content_tab_top_left"> 
          <div class="body_titles">
            Title
          </div>
                <div class="body_content">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    <br />
                </div>
              </div>
            </div>
     <div id="content_tab_center_left">
            <div id="padding_div1"></div>
          <div class="body_titles">
            Title
          </div>
       <div class="body_content">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
           Test<br />
                    Test<br />
                </div>
     </div>
    <div id="content_tab_bottom_left">
          <div class="body_titles">
            Title
          </div>
                <div class="body_content">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
            </div>
        </div>
     </div>
        <div id="column_right_container" style="display:inline-block">
               <div id="content_tab_top_right">
                  <div class="body_titlesRIGHT">
                    Title
                    </div>
                <div class="body_contentRIGHT">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    <br />
                </div>
         </div>
             <div id="content_tab_center_right">
                    <div id="padding_div2"></div>
                  <div class="body_titlesRIGHT">
                    Title
                  </div>
                        <div class="body_contentRIGHT">
                            Content
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Tests<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            <br />
                            <br />
                        </div>
            <div id="content_tab_bottom_right">
                  <div class="body_titlesRIGHT">
                    Title
                  </div>
                        <div class="body_contentRIGHT">
                            Content
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Tests<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                    </div>
                </div>
             </div>
        </div>  
  </div>

First, your

<div id="columnn_left_container" style="display:inline-block">

has nn in the column part

Change that to

<div id="column_left_container" style="display:inline-block">

Well you've got div#body_container as a block level element, meaning it stretches to fill 100% of its horizontal space. As a sibling of that, you've got div#column_right_container floated right with a width of 300px. div#column_right_container will float right and below div#body_container because div#body_container isn't floated or inlined.

I am not quite certain what you wish to align. If you want the column_right_container <div> to be next to the body_container, then all you need to do is add float: right; to the body_container container. (re-ordering them will change which one is further right)

Currently the body_container is not floating, so it will default to using up the entire width of the page. Floating it will leave room for another <div> next to it. If you aren't using it already, I would suggest using Firebug. It allows you to turn off styles one by one to see which ones are affecting your elements.

Hope that helps.

If you want the 2 columns (#column_left_container and #column_right_container) to collapse (side by side), you need to float both columns to left (or change your order and float both to right). You have a margin-left: 20px; for the column_right_container so you'll always going to have a gap unless you remove it (if that's what you want).

As an alternative, you might want to use positions (position:relative for the #body_container and position:absolute for both columns with left:n for #column_left_container and left:n+640px for the #column_right_container.