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 :)

Making screencasts for Youtube with CamStudio

Yesterday I needed to find a simple and robust solutions for recording a screencast. It turned out to be not as easy as I thought.

To get a similar workflow as with my other video editing I wanted it to work like this:

  1. Record a 1280 x 720 section from my screen to a high quality format
  2. Open and edit the recorded file in Sony Vegas Platinum 8
  3. Render it from Vegas to a lossless format
  4. Re-render it using HandBrake
  5. Upload the file to Youtube

Record with CamStudio

I started out with the latest beta of CamStudio. It a nice, simple and easy tool that does what I need.

My first attempt was to save an AVI file with the included Microsoft Video 1 codec. The quality was pretty low so I tried to use the CamStudioCodec (from their web site). I got a nice looking AVI. However Vegas didn’t really like this file. It worked, but it was very slow.

Then I tried to use the Huffyuv codec that I had installed recently when I optimized my HDV workflow. It created a BEAUTIFUL HUGE file that I could work with in Vegas. I edited the file, normalized the audio and rendered the video almost exactly the same way as I render all my other videos (described in my HDV workflow). I just lowered the resolution from 1440 x 1080 to 1280 x 720.

Re-render and upload to Youtube

I opened the file in HandBrake and selected the High Profile. I exported the file the same way as in my normal HDV workflow. It created a good looking file. I uploaded it to Youtube. Everything went smooth. Until I looked at the video on Youtube. It came out gray. No video at all. I made a test upload to Vimeo. No problems. I tried with different codecs and settings. Both in Handbrake, Vegas and CamStudio. All came out gray on Youtube.

I tried really hard to understand why this didn’t work but I couldn’t get it to work so I resorted to Avidemux. I opened the file in Avidemux. Selected the MPEG-4 ASP (Xvid) codec for video and MP3 for audio (I increased the quality on both). I exported the file and boom. It worked fine on Youtube.

I’m not sure what went wrong. Or why. And I ended up yet another tool in my belt. But I almost reached my goal of having similar workflows so I’m pleased.

One.com allowed image upload max image size

I’ve had some problems uploading images to my one.com hosted WordPress (v 2.9.2) blog. It seems like they have increased the allowed upload sizes / allowed memory so I’ll make a test with some different images.

If I’m not wrong these results are better than the last time I tried but I can’t remember any details. This time I’ll save the results here so I can compare them later.

300 kb – 3000 x 1281 px – works

800 kb – 2000 x 2000 px – works

1 mb – 2200 x 2200 – fails – The image is uploaded but it fails to scale it.

1,1 mb – 2500 x 2500 – fails – The image is uploaded but it fails to scale it.

1,5 mb – 3000 x 3000 – fails – The image is uploaded but it fails to scale it.

If fails with the following error

Fatal error: Out of memory (allocated 44564480) (tried to allocate 4096 bytes) in
/xxx/xxx/xxx/httpd.www/blog/wp-includes/media.php  on line 913

Finally – Inkscape, Gimp and Wacom!

A year ago I replaced my old Wacom Intous 1 for a Wacom Graphire 4 and to my great frustration neither Inkscape nor Gimp could handle the new pad. I researched it and found out something about a GTK/Wacom-driver error… This was sad since I really liked both of the applications.

Inkscape with Tango Icons Gimp with Tango Icons

But today I downloaded the newest versions of both Inkscape and Gimp and it works like a charm! So welcome back in my life, I have missed you both!

Unfortunately the new version of GTK seems to break Workrave.

The Tango Icons are so nice! I cant stop playing with them ^_^

Update: After reinstalling all my GTK+ applications it doesn’t work again. I’ll try to find a solution for this and update this post once I know why.

Gimp shortcut propertiesUpdate 071215: Well it broke again… The new workaround is to disable pressure sensitivity in Gimp by adding the –no-wintab command line option to the Windows short cut (rightclick, edit and just add the option). I have tried to find a solution to add the –no-wintab options to have Gimp always use it but I can’t find it so if you have any idea on how to do that please tell me!