Beautiful stacking of DIVs in HTML

Update: Karl just sent me the link to Masonry. Works fine! T H A N K S !

I’ve been tearing my hair the last day to find a way to stack DIVs in multiple columns. I’m illustrating what I’m looking for with some images.

I’m trying to order DIVs with different content and size where you are recommended to read element in this order: One, Two, Three, Four, Five and Six. When you resize the screen (or read it on a smart phone) the DIVs are supposed to be stacked on top of each other in the same reading order. If the width of your screen only can show two columns you read One and two on the first row, three and four on the second and five and six on the last row.

My first idea is to just use float:left. Works kind of good. But only for the last column since it sets the height to all the other columns. Not so nice.

Then I tried to create 3 individual columns and put divs in each of them. This kind of works but you have to sort the DIVs in the wrong order in the HTML. And also the idea is that the DIVs should stack naturally when you make the window smaller. Well. Now they don’t. Too bad.

I searched for a while and found HNterest. They are positioning the DIVs absolute. Ok. So maybe I’ll resort to that? I’ll try that. Later.

Check my sample html and forge it on github as well.

Thanks to Adam for all help in this! I’m not sure what to do without you 🙂

New web site for Section C!

I have just published the web site for the Swedish skateboard distributor Section C! It’s running on WordPress with a custom theme. Much black, to get the nice contrasts with all the photos.

Some screenshots

Home / first -page screenshot
An example of a brand sub page

Add colors to your tag cloud for readability

I’m using the A better tag cloud WordPress widget to be able to configure the tag cloud on my blog. It’s a nice widget that I really recommend!

I wanted to make it easier (and prettier) to use by adding colors to the tags. A darker color means a more used tag, a lighter means that the tag is less used. I based my colors on the Tango palette.

The tag cloud with the original CSS to the left and my customized to the right

All different sizes in A better tag cloud already had their different CSS classes so adding colors were easy. All I had to do was to add the following CSS to the bottom of my styles.css file.

/* Add colors to A better tag cloud */
.nktagcloud-8 {
.nktagcloud-9 {
.nktagcloud-10 {
.nktagcloud-11 {
.nktagcloud-12 {
.nktagcloud-13 {
.nktagcloud-14 {
.nktagcloud-15 {
.nktagcloud-16 {
.nktagcloud-17 {
.nktagcloud-18 {
.nktagcloud-19 {
.nktagcloud-20 {
.nktagcloud-21 {
.nktagcloud-22 {


SharpWired News Site!

The Planet SharpWired site is now online on our source forge project page!

A screenshot of the SharpWired planet (080813)

Since sourceforge don’t allow outgoing connections on project web pages I have set up the planet elsewhere and uploads the files to sourceforge every hour using rsync. This means that there is a delay for maximum one hour before the page and news feeds are updated. It’s not perfect, but I think it’s good enough. For now at least.

Update: More information about the planet and the customized SharpWired PlanetPlanet skin/template can be found in the SharpWired Wiki.

Update 2: The wiki isn’t alive anymore but here are two screenshots of how it looked.

Please report any problems or errors and have a nice weekend!

New Manticore Skateboards Web Site!

Manticore Skateboard - BannerAt last! The new Manticore Skateboards web site is launched. I have been working on this for some weeks now and it feels great to release it!

All content is created and will be administrated with the wonderful WordPress software.


Screenshot: Manticore Skateboards #3 - News page Screenshot: Manticore Skateboards #3 - Team page Screenshot: Manticore Skateboards #3 - Team page: Jim Augustsson Screenshot: Manticore Skateboards #3 - Product page: Flylite series Screenshot: Manticore Skateboards #3 - Contact page

CSS Image rollover menu lists

Today I needed to build a menu consisting of images for a new website we are launching in a couple of days. I wanted to use a simple list with the links and use the background property for each li element to show the images. The text in the link-images were rotated and that caused a problem, I had to hide the default link text when the style sheet was loaded and display the text when the style sheet was unavailable (if you for example are having visual problems or use a PDA).

The next problem was to have a nice way to change the background image if a link is active or if a link is hovered. This can be done using JavaScripts, but I wanted to use CSS instead. This can be achieved using the a:hover pseudo class and output a class=”active” for the active element.

If this sounds like something you need, read the following:

  • Stuart Langridge describes how a background image can ”override” the default text in an element
  • Pixy describes how rollovers without JavaScripts can be accomplished
  • SimpleBits describes how these two techniques can be combined

Update (060731): I have found one problem with this solution. If you surf the site with CSS enabled, but images disabled you are not going to see the menu. I have not yet any solution to this, but I’ll update this post once I have found a solution.