title: Positioning divs with css using absolute positioning
body: <p>I know this is a noob question, but I just can't figure this out! I'm laying out a page for our intranet and all I need to do is position some divs side by side. Each container is a different item, but all containers have the same structure, a header, some descriptive text, and an image. I will be adding items as they are given to me. This is basically just a page i'm creating for employees to sell items. Here is my css and an image of what I'm trying to achieve. Please let me know if this doesn't make sense, but as smart as you guys have proven to be in the past, i'm sure you get the idea.</p>
  
  <pre><code>.wrapper {
      width: 1260px;
      height: 900px;
      margin: 0px auto;
      position: relative;
  }
  .container {
      width: 400px;
      height: 400px;
      margin: 10px;
      position: absolute;
  }
  .itemText {
      width: 350px;
      height: 190px;
      padding: 0px;
      position: absolute;
      top: 25px;
      left: 25px;
  }
  .itemHead {
      padding: 0px;
      margin: 0px;
  }
  .itemDesc {
      padding: 10px;
      margin: 0px;
  }
  .itemThumb {
      width: 350px;
      height: 150px;
      position: absolute;
      bottom: 25px;
      left: 25px;
  }
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" href="css/text.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="container"&gt;
              &lt;div class="itemText"&gt;
                  &lt;div class="itemHead"&gt;
                      &lt;p&gt;Lorem ipsum.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="itemDesc"&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="itemThumb"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;div class="itemText"&gt;
                  &lt;div class="itemHead"&gt;
                      &lt;p&gt;Lorem ipsum.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="itemDesc"&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="itemThumb"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;div class="itemText"&gt;
                  &lt;div class="itemHead"&gt;
                      &lt;p&gt;Lorem ipsum.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="itemDesc"&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="itemThumb"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/wy4ib.png" alt="basic layout"></p>