Help coding 's in Footer

  • samell1

    (@samell1)


    13 years, 9 months 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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • egado

    (@egado)

    13 years, 9 months 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 😉

    Thread Starter samell1

    (@samell1)

    13 years, 9 months 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 😉

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Help coding 's in Footer’ is closed to new replies.