Tutorials

When working on a website it’s standard practice to use unordered lists to create menu items on your website and as such the menu’s you find above you are all done that way.

When working on a client website recently I had the need to use the display:inline-block CSS code on a menu to get the items to display in a certain way.

Many moons ago when I started using CSS for the first time, I seemed to encounter the same problem consistently. My containing div wouldn’t stretch down beyond the divs inside it. I quickly discovered that this was due to those inner divs being floated, and effectively losing their height.

After some experimentation I discovered that there was a way to fix this in a very simple way. To follow I will show you that way, as well as a new method that I have been using lately. The newer method is probably best practice now though I suppose, as many things in this field, best practice that could be argued. Why not make the choice yourself?

I’m currently working on a new design for my personal blog that myself and my fiance Kerry use and wanted to use a technique I seen over at Design Informer, where when you click on a button/link it actually moves as if it is being pushed down.

The first thing I done was look at what attribute was actually being used, then work on re-creating the effect with my CSS.