title: Placing two divs next two each other (inside another div)
body: <p>so I'm basically tying to have everything for this site contained in one div. This is a success. My menu bar is in its on div inside of the main one. Through some rearranging of code and modifying of CSS, I have got my image gallery div to be in the right place. However, is this effective on other resolutions? Is there an easier way to get my gallery to show up next to my menu bar? A live demo of the site can be found at <a href="http://accessorizewithstyle.tk" rel="nofollow">accessorizewithstyle.tk</a>. Any help would be appreciated. I'm trying to make this site scale dynamically so that it looks good no matter which browser/resolution is viewing it.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Accessorize With Style | Index&lt;/title&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
             // create the image rotator
             setInterval("rotateImages()", 2000);
         });
  
         function rotateImages() {
             var oCurPhoto = $('#gallery div.current');
             var oNxtPhoto = oCurPhoto.next();
             if (oNxtPhoto.length == 0)
                 oNxtPhoto = $('#gallery div:first');
  
             oCurPhoto.removeClass('current').addClass('previous');
             oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
                 function() {
                     oCurPhoto.removeClass('previous');
                 });
         }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  body {
      overflow:hidden;
  }
  img.background {
      position:absolute;
      top:0;
      left:0;
      width: 100%;
      z-index:-3;
  }
  img.background {
      width:auto\9;
      max-width:100%;
  }
  .menu{
      margin:0; 
      padding:0; 
      width:300px; 
      list-style:none;
      background:rgb(255,255,255);
  }
  .menu li{
      padding:0; 
      margin:0 0 1px 0; 
      height:40px; 
      display:block; 
  }
  .menu li a{
      text-align:left;
      height:40px; 
      padding:0px 25px; 
      font:16px Verdana, Arial, Helvetica, sans-serif; 
      color:rgb(255,255,255); 
      display:block; 
      background:url('images/verMenuImages.png') 0px 0px no-repeat; 
      text-decoration:none;
  }
  .menu li a:hover{
      background:url('images/verMenuImages.png') 0px -40px no-repeat; 
      color:rgb(0,0,0);
  }
  .menu li a.active, .menu li a.active:hover{
      background:url('images/verMenuImages.png') 0px -80px no-repeat; 
      color:rgb(255,255,255);
  }
  .menu li a span{
      line-height:40px;
  }
  #site {
      width:85%;
      margin:0 auto;
  }
  #menubar {
      position: relative;
      left: 0px;
  }
  #gallery {
      position: absolute;
      left: 35%;
      height:400px;
      width:400px;
  }
  #gallery div {
      position:absolute;
      z-index: 0;
  }
  #gallery div.previous {
      z-index: 1;
  }
  #gallery div.current {
      z-index: 2;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;img src="images/background.jpg" class="background" /&gt; 
  &lt;div id="site"&gt;
  &lt;P&gt;&lt;center&gt;&lt;img src="images/logo.png" class="logo" /&gt;&lt;/center&gt;&lt;/P&gt;
  &lt;div id="menubar"&gt;
  &lt;div id="gallery" align="center"&gt;
  &lt;div class="current"&gt;
  &lt;img src="http://i.istockimg.com/file_thumbview_approve/1459298/2/stock-photo-1459298-jewllery-2.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;img src="http://i.istockimg.com/file_thumbview_approve/3480966/2/stock-photo-3480966-bracelet.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;img src="http://i.istockimg.com/file_thumbview_approve/14879331/2/stock-photo-14879331-earrings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;img src="http://i.istockimg.com/file_thumbview_approve/2741073/2/stock-photo-2741073-wedding-rings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;img src="http://i.istockimg.com/file_thumbview_approve/15490304/2/stock-photo-15490304-scarf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;ul class="menu"&gt;
    &lt;li&gt;&lt;a href="index.html" class="active"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="about.html"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="necklaces.html"&gt;&lt;span&gt;Necklaces&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="bracelets.html"&gt;&lt;span&gt;Bracelets&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="earings.html"&gt;&lt;span&gt;Earings&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="rings.html"&gt;&lt;span&gt;Rings&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="scarves.html"&gt;&lt;span&gt;Scarves&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="contact.html"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>