Dave Russell » CSS

A truly versatile three column template

Dave — Mon, 11 Apr 2011 13:30:23 +0000

There are hundreds of 3 column templates out there, so what’s one more right? Well the difference here is that this one template can handle 1,2 or 3 columns, purely dependent on the existence of the columns on the html. So, if you have a CMS system and you generate a left or right column, then it will be rendered correctly, but if not then the content will stretch accordingly.

First we need some structure

<div id="skin" class="align rel">

        <div id="page" class="abs">

            <div id="main" class="column">

                <h1>Heading</h1>

                <div id="startcontent" class="content">

                    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>

                </div>

            </div>

            <div class="rel" id="footer"><p>footer</p></div>

            <div id=‘left’ class=‘column abs leftcolumn’><h2>Left</h2></div>

            <div id=‘right’ class=‘column abs rightcolumn’><h2>Right</h2></div>

        </div>  

    </div>

    <div id="bannerimage" class="abs"><a class="align">banner</a></div>

Some CSS (I like to include a reset.css before this to clear out any cross browser issues)

.align          {width:1004px;margin:0 auto;}

    .rel            {position:relative;}

    .abs            {position:absolute;}

    .displayblock   {display:block;}

    #page           {width:1004px;top:340px;background-color:#fff;}

    #left           {top:0;left:0;width:220px;background-color:#eee;}

    #right          {top:0px;left:740px;width:264px;background-color:#eee;}

    #main           {margin:0 10px;background-color:#bbb;}

    .incleft #main  {margin-left:220px;}

    .incright #main {margin-right:265px;}

    .content        {margin:27px 30px 100px 30px;}

    #bannerimage    {top:0px;left:-1px;z-index:-1;width:100%;height:600px;margin:0 auto;background-color:#ccc;}

    #bannerimage a  {height:195px;margin-top:85px;display:block;}

    #footer         {width:1004px;height:200px;background-color:#ddd;}

And then the javascript (remember to add the jQuery library and an optional equal heights plugin)

//—Column display manager
if($(‘#page .leftcolumn’).length>0){ $(‘#page’).addClass(‘incleft’); $(‘#left’).addClass(‘displayblock’);}
if($(‘#page .rightcolumn’).length>0){ $(‘#page’).addClass(‘incright’); $(‘#right’).addClass(‘displayblock’);}
        //—Column equal heights | dependancy: jquery.equalheights.js

        if ($(‘.column’).length > 1) { $(‘.column’).equalHeights(); }

The great thing about this template is that it justs works – remove the #left div and the content takes up the first two columns, remove the #right div and the content takes up the last two columns. Take out # left and #right and, I’m sure you’ve guessed it, the content takes up all three columns.

Multi Column Lists with jQuery and CSS

Dave — Mon, 11 Apr 2011 12:43:29 +0000

I found myself needing to solve this problem and some googling revealed that I was not the only one. The challenge I had was how to take a long list of items and make them wrap, creating columns, newspaper style next to each other. The closest I got was from the guys at alistapart, but still not quite what I was after.

So, with coffee mug charged and appropriate tunes on the ipod I set out to solve some problems. The resulting jQuery function is actually quite succinct – maybe I have left something out, but it is exactly what I need: The list is dynamic, so I never know quite how long it is going to be and I do not want children elements to be spread over multiple columns.

The list goes something like this

<ul id="test">

                <li>Parent

                    <ul>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                    </ul>

                </li>

                <li>Parent

                    <ul>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                    </ul>

                </li>…

and the javascript something like this:

jQuery.fn.multiColumnList=function(settings){

    settings = jQuery.extend({

        width: 300,

        maxheight: 400,

        forceWidth:false
}, settings);
var $originallist = $(this);
var cols = Math.round($originallist.width()/ settings.width);
var colwidth = Math.floor($($originallist).width()/ cols);
var size = $(‘>li’,this).size();
var newlist ="";
var currentColumnHeight = $(this).find(">li").eq(0).height();
var currentColumnContents =‘’ + $(this).find(">li").eq(0).html() + ‘
’;
    for (i = 0; i < size; i++) {
        if ((i + 1) < size) { 

            if (currentColumnHeight < settings.maxheight) {

                currentColumnContents = currentColumnContents + ‘
’ + $(this).find(">li").eq(i + 1).html() + ‘
’;

                currentColumnHeight = currentColumnHeight + $(this).find(">li").eq(i + 1).height();
}
else{

                newlist = newlist +‘’ + currentColumnContents + ‘’;

                currentColumnContents =‘’ + $(this).find(">li").eq(i + 1).html() + ‘
’;;

                currentColumnHeight = $(this).find(">li").eq(i).height();
}
}
}

    newlist = newlist +‘’ + currentColumnContents + ‘
’;
    $(newlist).insertBefore($originallist);

    if (settings.forceWidth) {

        $(‘ul.megacol’).css(‘width’, settings.width);

    }

    $originallist.remove();

    return this;

}

Lastly, a sprinkling of CSS to make sure your new columns render next to each other

.megacol    {float:left;}

To make this all come together, make sure you have included the jQuery library and the function before calling it:

$(document).ready(function() {

            $("#test").guidemega();

        });

Fantastic use of pure css to create animation

Dave — Fri, 29 Jan 2010 11:20:14 +0000

I like to think I have a fairly good grip on CSS, but this takes it to another level:
Introducing the rolling coke can…

Consider yourself humbled.