Konnor

function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } $(document).ready(function() { equalHeight($(".column")); }); window.onresize = function(event) { equalHeight($(".column")); }
 
That should do it. Not sure why you would want to though, the chances of someone re-sizing their browser while viewing your site are almost 0.

Too old? Never too old to do what you want with your life.
 
I remember the days when I was a spritely 21 year old. I shall be requesting a pipe and slippers for my upcoming 27th birthday.

Stupid stock imagery that depict people much happier and more successful than myself.

Stupid stock imagery that depict people much happier and more successful than myself.

Stupid stock imagery that depict people much happier and more successful than myself.

Hi there!
 
To do this, you need to change the styling to:
 

.webDesign { background: url('../img/screenMini.png') 23% 50% no-repeat; } .webDevelopment { background: url('../img/gear.png') 13% 50% no-repeat; } .iPad { background: url('../img/calculator.png') 16% 50% no-repeat; width: 314px; }
 
You might want to edit the first % values to your liking. But don't touch the 50% values, there the ones that keep the image in the middle of the height specified.
 
Hope this helps!

I have to say I don't actually know the exact differences however I tend to think of it in terms of soft/hard.
 
Without display:block the menu item's edges are 'soft' and not enforced. The other elements can shift them about to make room for themselves, so they do, in this case shifting everything down until it bumps into the next 'hard' element. Which is the text itself.
 
The reason the green area is dropping down behind the red menu items is, I think, because the menu items are floated left. In terms of page structure the green area is completely ignoring the height of the red elements. That height:50px (Or whatever it is) is not being listened to because of the float. It IS still being visually represented though.
 
With display:block you are telling the red menu item to enforce it's borders essentially. That if it's 50px high and contained inside an element it'll make sure it has 50px of height. If it has padding on either side of the text it'll push adjacent elements out the way until it gets its 15px of padding.
 
Some elements are soft by default, others are hard. <h1><h2> etc are hard. <span><li> are soft.

Display block basically means you can set exactly a width height, padding, margins etc... Display inline means the content will kind of flow and do it's own thing based on font, line-height, and different browsers will do slightly different things. Display inline-block is a happy in-between sometimes!