title: Problems with floating two divs side by side (both not following wrapper width)
body: <p>First off, excuse my lack of knowledge regarding CSS and HTML. I'm quite new to this.</p>
  
  <p>I've read most of the questions here regarding aligning two divs side by side here, I've also read some tutorials. But for some reason, I'm having trouble with the divs length in my code.</p>
  
  <p><a href="http://abyssalchronicles.com/3revtest/acver3_base.html" rel="nofollow">This is the test site's URL, to give you guys an idea of how it looks.</a></p>
  
  <p>And here's the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;  
  &lt;head&gt;  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;  
      &lt;title&gt;Okamainakute ne~&lt;/title&gt;  
      &lt;link href="acver3style.css" rel="stylesheet" type="text/css" /&gt; 
  &lt;/head&gt;  
  
  &lt;body&gt;  
  
      &lt;div id="main_wrapper"&gt;  
  
          &lt;div id="banner_area"&gt;
  
                      &lt;div id="logo"&gt;
                          &lt;a href="http://www.abyssalchronicles.com"&gt;&lt;img src="images/acver3_sitelogo.png" alt="" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
  
                      &lt;div id="xillia"&gt;
                          &lt;img src="images/acver3_toxlogo.png" /&gt;&lt;br /&gt;
                              &lt;div class="xilliacountry"&gt;&lt;img src="images/acver3_toxus.png" /&gt;&lt;br /&gt;&lt;/div&gt;
                                  &lt;div class="xilliashops"&gt;&lt;a href="" target="_blank"&gt;&lt;img src="images/gamestop.png" alt="" /&gt;&lt;/a&gt; &lt;a href="" target="_blank"&gt;&lt;img src="images/playasia.png" alt="" /&gt;&lt;/a&gt;  &lt;a href="" target="_blank"&gt;&lt;img src="images/amazon.png" alt="" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;
                              &lt;div class="xilliacountry"&gt;&lt;img src="images/acver3_toxeu.png" /&gt;&lt;br /&gt;&lt;/div&gt;
                                  &lt;div class="xilliashops"&gt;&lt;a href="" target="_blank"&gt;&lt;img src="images/zavvi.png" alt="" /&gt;&lt;/a&gt; &lt;a href="" target="_blank"&gt;&lt;img src="images/shopto.png" alt="" /&gt;&lt;/a&gt;  &lt;a href="" target="_blank"&gt;&lt;img src="images/playasia.png" alt="" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="maincontent"&gt;
  
              &lt;div class="menu_area"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com"&gt;HOME/NEWS&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/tales-of"&gt;TALES OF... »&lt;/a&gt;
                              &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/tales-of/type"&gt;By Type&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/tales-of/platform"&gt;By Platform&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/features"&gt;FEATURES »&lt;/a&gt;
                              &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/features/media"&gt;Media&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/features/columns"&gt;Columns&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/features/reviews"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/features/fanworks"&gt;Fan Works&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://gallery.abyssalchronicles.com" target="_blank"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://forums.abyssalchronicles.com" target="_blank"&gt;FORUMS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/the-site"&gt;THE SITE »&lt;/a&gt;
                              &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="http://wwww.abyssalchronicles.com/the-site/ACs-history"&gt;AC's History&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/the-site/staff"&gt;Site Staff&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/the-site/affiliates"&gt;Affiliation&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://www.abyssalchronicles.com/the-site/contact-form"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
  
                  &lt;div id="socialgels"&gt;
                      &amp;nbsp&lt;a href="" target="_blank"&gt;&lt;img src="images/fbgel.png" alt="" /&gt;&lt;/a&gt; &lt;a href="" target="_blank"&gt;&lt;img src="images/twgel.png" alt="" /&gt;&lt;/a&gt; &lt;a href="" target="_blank"&gt;&lt;img src="images/tmgel.png" /&gt;&lt;/a&gt; &lt;a href="" target="_blank"&gt;&lt;img src="images/ytgel.png" alt="" /&gt;&lt;/a&gt; &lt;a href="" target="_blank"&gt;&lt;img src="images/rsgel.png" alt="" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
                  &lt;div id="highlights"&gt;
                      &lt;img src="images/sample_highlightsfader.jpg" alt="" /&gt;
                  &lt;/div&gt;
  
                  &lt;div id="ads"&gt;
                      &lt;img src="images/sample_ad.jpg" alt="" /&gt;
                  &lt;/div&gt;
  
  
  
  
  
          &lt;/div&gt;  
  
      &lt;/div&gt;  
  
  
  &lt;/body&gt;  
  &lt;/html&gt;  
  </code></pre>
  
  <p>And the CSS for that:</p>
  
  <pre><code>body {
      margin:0; padding:0;
      background:#0e564b url('images/ver3_banner.jpg') no-repeat center top;
  }
  
  a img {
      border:0;
  }
  
  img {
      border:0;
      margin:0;
  }
  
  #main_wrapper {
      width:983px;
      padding:0;
      border:0;
      margin:0 auto;
      top:0;
  }
  
  #logo {
      width:750px;
      padding:0;
      border:0;
      margin:0;
      display:-moz-inline-stack;
      display:inline-block;
      vertical-align:top;
      zoom:1;
      *display:inline;
  }
  
  #xillia {
      width:222px;
      padding:0;
      border:0;
      margin:0;
      display:-moz-inline-stack;
      display:inline-block;
      vertical-align:top;
      zoom:1;
      *display:inline;
  }
  
  #socialgels {
      width:255px;
      padding: 3px 5px 3px 2px;
      border:0;
      margin:0;
      text-align: right;
      display:-moz-inline-stack;
      display:inline-block;
      vertical-align:top;
      zoom:1;
      *display:inline;
  }
  
  #maincontent {
      box-shadow: 0 4px 5px 3px #062521;
      width:983px;
      background-color: #f0f8ff;
      float:left;
  }
  
  #highlights{
      padding: 10px 0px 10px 17px;
      border:0;
      margin:0;
      background: url('images/highlights_bg.gif') #f0f8ff no-repeat top left;
      vertical-align:top;
      float:left;
  }
  
  #ads {
      padding:10px 17px 10px 0px;
      border:0;
      margin:0;
      background: url('images/ads_bg.gif') #f0f8ff no-repeat top right;
      float:right;
      position: relative;
      z-index:1;
  }
  
  .xilliacountry {
      text-indent:40px;
      border: 0;
      margin: 0;
      padding:0;
  }
  
  .xilliashops {
      text-indent:75px;
      border: 0;
      margin: 0;
      padding:0;
  }
  
  .menu_area {
      background: url('images/ver3_menubg.jpg') #ab528c no-repeat;
      height:42px;
      border-top:#6a6a6b solid 1px;
      border-bottom:6a6a6b solid 1px;
      font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif;
      font-weight: bold;
      font-size: 15px;
      color: #fff;
      text-shadow: 2px 2px #660643;
      z-index:2;
      positon: absolute;
  }
  
  .menu_area ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: relative;
      display: inline-table;
  }
  
  .menu_area ul li:hover &gt; ul {
      display:block;
  }
  
  .menu_area li {
      float: left;
  }
  
  .menu_area ul a {
      background-image: url('images/menu_bg_divider.jpg');
      background-repeat: no-repeat;
      background-position: right;
      padding: 11px 16px 11px 16px;
      display: block;
      color: #fff;
      text-decoration: none;
  }
  
  .menu_area ul li a:hover {
      color: #fff;
      background-color: #b95a94;
  }
  
  .menu_area ul ul {
      display: none;
      background: #bb5c96;
      background-image: none;
      border: 0;
      padding: 0;
      position: absolute;
      top: 100%;
      width: 152px;
      z-index:2;
  }
  
  .menu_area ul ul li {
          float: none; 
          border-top: 1px solid #e6b5d5;
          position: relative;
  }
  
  .menu_area ul ul li a {
              padding: 10px 15px 10px 15px;
              color: #fff;
              background: none;
  }   
  
  .menu_area ul ul li a:hover {
                  background: #e385c1;
  }
  </code></pre>
  
  <p>The two divs I'm trying to align together are the <strong>highlights</strong> and <strong>ads</strong> divs. They're contained within a wrapper div named <strong>maincontent</strong>, and the said two divs are located below another div named <strong>menu_area</strong>. I think I should also note that within the main_area div, there's also a div for the social buttons you see at the right, named <strong>socialgels</strong>. </p>
  
  <p>Anyway, as you can see in the demo page, the divs highlights and ads are aligned no problem, but that's because I had to decrease the width given to those divs. I want the site to strictly be 983px wide only, hence why the other parent divs you see in the code (the <strong>main_wrapper</strong> and <strong>banner_area</strong> divs) are set at 983px. The maincontent div is also set at that. As such, the <em>highlights</em> div was supposed to be set at 662px and the ads div at 321 px, with highlights floating left and ads floating right. That way, they equal 983px. However, when I do set it like that, for some reason they just won't place side by side: the ads div would always position itself below the highlights div. OR at times (I seriously have no idea what happened), the ads div would position itself to the very far right, as if there's this invisible space between the highlights and ads div that I just don't know where it comes from. They align properly when there are no widths indicated for both divs (that's how the demo page is, currently), but I can't have it like that.</p>
  
  <p><a href="http://abyssalchronicles.com/3revtest/acver3_base_2.html" rel="nofollow">Here's a look of the page when there're indicated widths for both divs.</a></p>
  
  <p>Apologies if it was long. Basically, I really need to set those specific widths to the highlights and ads div because I don't want the upcoming content I'll be adding below them (the actual posts, and the rest of the navigation at the right, and such), to ruin the layout. I really need it at that specific 983px width.</p>
  
  <p>Thank you in advance.</p>