WordPress.org

Support

Support » Themes and Templates » Help coding 's in Footer

Help coding 's in Footer

  • I’m running Mystique over at http://realgeekstech.com. I’m currently working on designing a new footer for the site (much like the one on The Verge, for a reference point.). On The Verge, they have the four columns. In their source code, they do this with <div>’s, but obviously I can’t see the CSS behind it. I only need 3 columns. I’m just kind of clueless. I used to know HTML/CSS like the back of my hand, but it’s been years since I’ve tried to do anything with it. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hmm… guess you need something like this markup

    HTML

    <div class="column-wrapper three-columns">
      <div>
        <p>Content of the <em>first</em> column</p>
      </div>
    
      <div>
        <p>Content of the <em>second</em> column</p>
      </div>
    
      <div>
        <p>Content of the <em>third</em> column</p>
      </div>
    </div>

    CSS

    .column-wrapper
    {
      overflow: hidden;
      width: 100%;
    }
    
    .three-columns > div
    {
      /* lets say your content area has 960px = 2 * 30px margin and 3 x 300px box width */
      float: left;
      width: 300px;
      margin-right: 30px;
    }
    
    .three-columns > div:last-child
    {
      margin-right: 0;
    }

    not tested, but should work as a example 🙂 let me know if you get in trouble 😉

    Thanks so much! Had to adjust a few pixel values to get everything to fit, but it works flawlessly- I’ll let you know when I get my C&D letter 😉

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Help coding 's in Footer’ is closed to new replies.
Skip to toolbar