WordPress.org

Ready to get started?Download WordPress

Forums

Help coding 's in Footer (3 posts)

  1. samell1
    Member
    Posted 2 years ago #

    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!

  2. egado
    Member
    Posted 2 years ago #

    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 ;)

  3. samell1
    Member
    Posted 2 years ago #

    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 ;)

Topic Closed

This topic has been closed to new replies.

About this Topic