Fluid 3 column layout with fixed width center.

This CSS layout will allow you to have a fixed with, center positioned column, with 2 fluid width flanking columns on either side that fill the width of the screen with content, glorious content.

Boom. That’s right.

I know that searchers are interested in downloading a sample or copy-pasting some code into Dreamweaver or whatever, so I will skip the story about all the different configurations I tried that didn’t work, and get down to the code. HTML bitches.

DOWNLOAD SAMP SAMP SAMPLE!
VIEW A DEMO!!

<body>
<div id="container">
	<div id="col_1" class="col">
    	<div class="col_inner">
            <p>... ... ...</p>
        </div>
    </div>
	<div id="col_2" class="col">
    	<div class="col_inner">
            <p>.. ... ...</p>
        </div>
    </div>
	<div id="col_3" class="col">
    	<div class="col_inner">
            <p>... ... ...</p>
        </div>
    </div>
</div>
</body>

And the CSS:

* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	font-family: helvetica, arial, sans-serif;
	color: #212121;
}

html, body {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

#container {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	position: relative;
}

.col {
	float: left;
	width: 50%;
	height: 100%;
	background-color: #CCC;
}

.col_inner {
	padding: 10px;
	border: 1px solid red;
}

#col_1 {
	margin-left: -225px;
}

#col_2 {
	width: 450px;
	margin: auto;
	background-color: #282828;
	opacity: 0.7;
}

#col_2 p {
	color: #CCC;
}

#col_3 {
	float: right;
	margin-right: -225px;
}

#col_1 .col_inner {
	/* Margin is half of the width of the fixed center */
	margin-left: 225px;
}

#col_3 .col_inner {
	/* Margin is half of the width of the fixed center */
	margin-right: 225px;
}

If you want this, download it now, by clicking on what you are reading.

The first thing I tried that actually worked was to use a display: table on the container, and display: table-cell on the child elements (the 3 columns) but this ONLY WORKS IN FIREFOX as far as I can see, and not Webkit browsers. I got this idea off of a forum, then added the twist of putting a margin-left and martin-right equal to half the width of the fixed width center on inner child elements of the 2 fluid columns (say that 5 times fast). The result? CSS ninja-ry in a box. Your welcome.

 

Squash a Function

I was recently developing a widget that had several functions: show the widget, hide the widget, ajax some shi… stuff. Anyway, I wanted the hiding function to have a callback, but didn’t want to do the leg work to build a callback into hiding function. In cases like these, it can be useful to just squash the function, and replace it with something else. How you ask? Read on!

var hider_bak = hider; 

hider = function()
{
  hider_bak();
  callback();
}

First create a backup to the function so that you can call it again later if necessary (which I do), then re-define the function. In this case I call the backup function, then my callback, but you could put whatever you want in the replacement function. Remember a variable is just a reference in javascript, so in this case, hider_bak becomes a reference to hider, then you do the squashing. Notice that when I create the reference to hider, I use the name with out the parens, so hider, not hider().

 

I want to give my heart to Tara McPherson

Why? Is it because she paints lots of pictures of girls with heart shaped holes in their chests? No, it’s because her art makes my eyeballs pop out of my skull, and then back into my skull, bringing images of sweet paintings, illustrations, and comics back to my brain. I seriously want to mate with Tara McPherson’s art, and have little art babies, that look kind of like me, but mostly like her art.

Ok, all kidding aside, I love the work of Tara McPherson. She’s mostly knows for comic/cartoon influenced, but gorgeous paintings of nude girls with heart shaped holes in the chest area. But her paintings are so much more! They also include paintings of clothed girls with heart-holes in their chests, of girls in space gear, of girls with sea-horses going through their bodies, of a flower growing a three-eyed hamster, and a mermaid riding a flying bear. I guess the only bad thing about her art is that i might stare at it forever and forget to do anything other than look directly at it. Have a look yourself:





Here’s her website: Tara McPherson’s Website is inside of this link. Click it to go to her website immediately.

 

Draw a perfect circle:

I’ve been working on getting my programming skills up to scratch, and a co-worker of mine turned me on to these SCIP videos. Link: SCIP Videos Anyway, I started playing around with some of the concepts in the video, namely separating code into re-usable bits, and I needed a good example to practice on. This is a really simple exercise where I create a plot() function (using JQuery and JS) that accepts an x and a y, and maps out a point on a div element. On top of that I built a function that plots a circle. It was kind of fun to explore some of the trigonometry that I had forgotten.

Here’s the link:
Super circle skillz

Pretty anti-climatic I know, but if you are learning some of this stuff yourself, poke around in my code and see how it’s structured. Anyway, this project made me think of how these same concepts might interact with SVG in the in HTML5. I didn’t know this before, but some websites are already using SVG (and other HTML5 elements), most notedly FireFox’s website (discovered this when I upgraded to FF4- how cool is FF4, right?!). Anyone reading this let me know if they have seen any cool projects using SVG. Comments are off for now, but drop an email in the Contact form.

 

Royksopp melts face with awesome combination of flashing lights and sounds:

Everyone should check this out. I love it. Me and this video are getting married.

Remind Me from Röyksopp on Vimeo.