David's Blog

Horizontally aligned form fields with CSS (WAS: Vertically aligned...)

Update: When I wrote this blog post, I confused "vertically" with "horizontally". I hope you can forgive me. This is how you can really align divs vertically. This article shows you how to align form fields horizontally.

In the last few weeks I was doing a lot of HTML and CSS again (after working on a WPF right client application for 1 1/2 years). One of the first things I had to do was to design an input form where the form fields have labels and are horizontally aligned. Here is how I solved it.

First, change the box sizing to border-box. Because for me, CSS makes much more sense when box-sizing is border-box.

* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

Alright, now let's align the form fiels. Here is the HTML form where the input fields should be horizontally aligned:

    <label>Radio Group:</label>
    <input type="radio"/> Option 1<br/>
    <input type="radio"/> Option 2<br/>
    <label>Some Input:</label>
    <input type="text"/><br/>

    <label>Another Input with a rather long caption:</label>
    <input type="text"/><br/>

    <input type="submit" value="submit"/>

The result looks quite ugly:

Option 1
Option 2

I started with this solution but I had to change it a bit. First, let's create the CSS rule for labels from the linked blog post:

label {
    float: left;
    width: 150px;
    text-align: right;
    margin-right: 0.5em;

The result looks like this:

Option 1
Option 2

Well, still a little crappy. The text of the third label is way too long. Also, we need a rule for form fields without a label.

label {
    float: left;
    width: 150px;
    text-align: right;
    margin-right: 0.5em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
.form-field-no-caption {
    margin-left: 150px;
    padding-left: 0.5em;
    <label>Radio Group:</label>
    <input type="radio"/> Option 1<br/>
    <span  class="form-field-no-caption"><input type="radio"/> Option 2</span><br/>
    <label>Some Input:</label>
    <input type="text"/><br/>

    <label>Another Input with a rather long caption:</label>
    <input type="text"/><br/>

    <span  class="form-field-no-caption"><input type="submit" value="submit"/></span>
Option 1
Option 2

And, of course, this also work when you specify a relative width for the labels:

label {
    float: left;
    width: 20%;
    text-align: right;
    margin-right: 0.5em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
.form-field-no-caption {
    margin-left: 20%;
    padding-left: 0.5em;
Option 1
Option 2

Before I discovered the blog post linked at the top of this article I used tables for horizontally aligning form fields. But a table is a rather ugly workaround in this case - and most of the time it is not necessary. Horizontally aligning form fields is not that hard in CSS - at least when you can use a fixed width or a width relative to the parent container for the labels.

You might also be interested in...

Posting Type: 

Freelancer to entrepreneur - Week 1

Other posts in this series:

This is the second time I work on a product (*). The first time we didn't even release anything, but we learned a lot. This time is different in a lot of ways. This time I am alone. I'll try to release as early as possible. And I will try to be as open as possible about what I do - by writing about it here, on my blog. I don't know if I'll succeed this time, but I am pretty sure that I can go back to freelancing if I run out of money. This is the first posting in a (hopefully long) series about my current project.

The beginning - 6 years ago

I always wanted to create stuff. And I always wanted to create a successful company. And then, in late 2005 Rene Pirringer (one of the most talented software developers I know) and I had a plan how it would work: We would get some seed money, start a company and work on a product.

In early 2006 it was clear that we would not get the seed money. We decided to start the company anyway. We would do consulting until there was enough money to work on our products. This is how ciqua was born.

ciqua was - and still is - a very successful (albeit very small) company, we just never released a product. So in 2011 I left because Rene and I had decided that it would be easier to do the consulting and freelancing as 2 independent freelancers. I still wanted to work on products, so I was working on some very small side projects when I had time. Some nice stuff emerged from that, but nothing too serious.

Startups in Linz

Just about a year ago I met Reinhard Nowak. He told me that he was working on an idea for a startup (now, a year later, I interviewed him about his startup). Through him I realized that there are quite a few startups here in or near Linz. Linz is not exactly a startup hub like Berlin or London, but it's not bad here either.

He also told me that there are several ways to raise money here in Austria. You can get seed funding from government agencies. You can get money for doing research. And there are private investors and business angels too.

In the past weeks I have been collecting ideas, alone and together with others. There was one particular idea I really liked, so I kept refining it for a few weeks. I also implemented some small proof of concept prototypes, but I did not have much time for that. I will talk more about the idea in a future blog post, when the first prototype is online.

And now, as of last week, my previous large (almost full time) freelancing contract ended. So I decided to start. I have not secured seed financing yet but I have some money. And as I said before, when I run out of money I am pretty sure that I can go back to freelancing. I have some runway left and I am sure I can create something useful during that time. And I then I hope that I'll earn some money because of the great product I created :)

So what's next?

In the next few weeks I will try to get out a first (alpha) version as quickly as possilbe. Most of the time I will work from home, but for a few days per week I plan to work at Daxbau, a co-working space here in Linz.

In the coming weeks I'll keep you up to date here on my blog, on Twitter and on Google+. I hope you'll stay tuned - You can do so by subscribing the RSS feed of this blog or by following me on Twitter and Google+ - Just use the links at the bottom of this page.

(*) Or the fourth time if you count gclimbing and scribblingspree, but I never really intended to make money from these projects.

Posting Type: 

Incremental development... of art

Two weeks ago, Daniel Lieske, one of my favourite artists, posted something very interesting in his blog. Daniel works on a graphic novel called The Wormworld Saga of which he has released three chapters so far. For the fourth chapter he has changed the way he works.

Iterative and incremental

On the first three chapters, Daniel worked in a strictly linear fashion. He did some preliminary work (writing the story, ...), concept art and then the final art. This has some drawbacks:

This approach puts a lot of pressure into the first few weeks of production because you want to make sure that your prelim is perfect before you go on to the next step.

Ok, so there are drawbacks with this approach, but it already is what we (software developers) call iterative and incremental: Every chapter is an increment that adds value to the final product. Those increments are created using an iterative process: The same steps are repeated for every chapter.

We probably would not call this process "agile" because the iterations are rather long and the anatomy of a single iteration is quite rigid and linear. But for some organizations who introduce Agile this is exactly what they strive for: A predefined process they can follow step by step. But, as I said before, this is not really agile development. Anyway, this fact alone should not drive you away from a process like this: After all it can produce great results. Just have a look at the first three chapters of the Wormworld Saga (I'll wait here) - They are awesome!

It can be done even better still. You still should be skeptical of long iterations which consist of a linear sequence of steps. Because this can - and probably will - cause problems. Just like Daniel found out.

Time to change

During the work on chapter 4, something happened:

For the first time I managed to totally screw up the writing. As always I presented the first draft to my wife. Normally she would point out a bunch of language issues but would generally like the result as a whole. This time she took a serious look at me and said "we have to work on that!".

This is something that (i guess) happens on every project: Something goes wrong. You created something that just does not work. Maybe you even created exactly what your customers have requested. But now they saw it and realized that they want it done differently.

In some organizations the default reaction to this situation is to simply ignore it. Pretend that it did not happen. In other organizations the development team would have a strict change management procedure: Of course the customers can get the changed functionality. They just have to light the black candle, admit that they were wrong and sign a contract with their blood. And in even other organizations finger pointing and political battles start.

Daniel Lieske works alone, so none of the above would work for him. So he has to do what some (successful) organizations do: Adapt.

Just in time

What I actually realized is that I don't have to arrive at a final version of the prelim in order to be able to do the concept artwork. A first draft is normally enough to line out the set pieces, characters and interiours of a chapter. Additionally, doing the concept art alongside the writing can give you a lot of creative impulses for the writing.

This creates something like short iterations within the longer "release cycles", where a release is one chapter. While still working on the story, he already creates concept art and final artwork where possible. And he uses the insights he gains in the later stages to influence the story. And for the first time he shared concept art from the chapter with the general public while still working on that chapter. Now this sounds a lot like agile software development to me!

I'm even thinking about going a step further. It turns out that there are certain portions of the prelim that just work straight from the first draft on while others get overworked a lot. What I'm thinking about is not to work on the final artwork in a linear top to bottom fashion as I'm used to but starting the final illlustration process on the finished parts of the prelim and keeping the other parts work in progress as long as possible. That would mean that I could work on the prelim even if I have already started the final illustration process.

I was quite impressed by this blog posting because of two things: First, you can use an agile approach to create a work of art. And second, you can arrive at this agile approach by just reflecting on what happened and applying common sense solutions to your problems. You just have to have the power to change what does not work!

Read more about agility, incremental development and small steps in my book "Quick Glance At: Agile Anti-Patterns": Buy it now!

You might be also interested in:

Learn more about how I can help you save money and earn money by applying new ideas to your agile development process.

Posting Type: 

Interview: Reinhard Nowak, co-founder of linemetrics

Image of Reinhard Nowak
LineMetrics Logo

This interview is the first in a series of interviews with software developers. I will add more interviews in the coming months.

You are co-founder of http://www.linemetrics.com/ - How, when and why did you launch that company?

I've been working on this idea for nearly 3 years now doing some proof-of-concepts and refining the whole concept with a lot of customer feedback. In December 2011 I asked my co-founder Wolfgang Hafenscher if he would like to join me at building a proper company out of the idea. We've already worked together on several startup-projects before where we learned one of our most important lessons - focus! So we're working fulltime on LineMetrics since end of 2011, spent the first months on refining the business model, find mentors, close fundings, talking to customers, network and find our first employees. Right now we are working hard to ship our first prototype which will be available Q3/12.

Linz is not exactly a famous startup hub - what makes it hard to be here? What is the advantage of creating a company in Austria?

Even though we knew there's a growing startup-scene in Linz and it might be easier to find great ressources there we decided to found our company in our home-village called "Haidershofen", which is 45km away from Linz. One of the reasons was that we got great support from public pre-seed funds in Lower Austria from day one. The other reason was pretty straight-forward - both founders have families and we wanted our main office close to the place we are living right now.

I don't know what it is like founding a startup outside Austria. What we've seen there are excellent educated people people and a rising number of experienced mentors available here in Austria. And if done right there's quite a lot of smart money available from public funds.

You "raised" money from the state of Lower Austria. How was getting government money? Was there anything that went particularily well in the process? Was it very bureaucratic?

First of all I have to say that we were lucky that the persons we dealt with were really supportive and were thrilled by the idea. I think it was well recognized that we are not trying to build the next social network. Instead we are building an innovative solution for a solid industry with a high potential.

I would not call it too bureaucratic. We've been challenged by both of the two funding institutes which forced us to take a closer look at the market, the customers and the competitors. In the end we came up with a more focused plan, which btw. ended up beeing our official business plan. Of course the ongoing reporting costs some time. But it's good for controlling reasons anyway and considering the financial benefits it's really worth the time.

Some people complain that starting a company in Austria can be hard because of high taxes and strict labour laws - How is your experience in these areas?

Personal costs and taxes are really high and take up a major part in our financial planning. But whats the alternative? Found the company in one of the global "startup hubs"? Good software developers in the Valley are almost twice as expensive as here. Same in London.

People in Austria are educated really well and really enthusiastic (given the "right" enviroment). So far moving our company outside Austria has never been an option for us.

What lessons did you learn from your current startup?

I've learned a couple of important lessons while working on different startups:

  • focus, focus, focus - spend your whole energy building ONE thing
  • try to find a mentor who has experience in your domain or at building startups from day one
  • go out of the office, network and tell your idea - nobody will steal it, but you'll receive very valuable feedback
  • talk to your customer before and while building your product
  • develop your business model by using techniques like "the lean canvas" instead of an endless business plan
  • don't make any compromises when hiring your first couple of employees - try to form a team of A-class members
  • don't waste your time with things (also people) that slow you down or don't work
  • there is no place in your team for people you don't trust completely
  • raise pre-seed money to be able to develop your business without a lot of financial pressure
  • don't get external ressources (students, companies) to build the critical part of your application

How do you ensure a healthy work-life balance as a founder?

Right I have only time for 2 things in my life - my family, I try to spend every minute available with, and LineMetrics. But maybe it is not just about work-life balance, it is about work-fun balance. I would rather like to spend 60+ hours a week working on something I love instead of spending 38,5h/week on a job I hate.

So you have fun doing what you do now?

Live as an entrepreneur is just awesome. It's not only the own challenge. It's also about the constructive environment and the people. I do not plan to get back on a regular job if not necessary.

Aren't there a lot of things outside your main interests that you have to do anyway, now that you run a company?

Of course there are a lot of tasks we (we are 2 founders) did not think about before. But I think we learned pretty fast how to organize and we are getting used to delegate. We already got 2 A-class employees on board who we trust and who can handle some of the work-load originally assigned to us. I think from a team-perspective this is a very key topic if you want to do great progress and scale fast.

What is the best thing about being a programmer? What is the worst?

It's great to be able to build things. But it can be tough if it is about release dates - especially in bigger teams without agile methods.

Which technology should a software developer learn right now?

Requirements like scaleability, rapid development and usability are always hot topics at startups. But if you look at startups there are so many different technologies used. It's hard to find a common pattern across these companies.
Personally I would learn technologies like NoSQL or In-Memory datastores, rapid development frameworks like Grails, jQuery, CSS and a solid development language like Java. Maybe cloud services like Google AppEngine or backend-frameworks like node.js are also worth mentioning.

But it really dependes on your goals and personal strengths. Developers should get deeper experience either in frontend or backend development - whatever suits them more.

How do you learn new technologies (On the job, in side projects, code katas, ...)?

Honestly I watch quite a lot of youtube videos and webcasts from conferences. This gives me a good overview, which technologies fit for any given problem and environment. If I decide to dig deeper on a topic I normally do a hands on at tutorials and try out on stand-alone side projects.

Thank you very much

Posting Type: 

Two inspiring speeches

Some days ago I stumbled upon this year's commencement speech at Harvard University by Fareed Zakaria (I found it via Armin Wolf). You should watch it, it is totally inspiring!

This reminded me of last year's commencement speech at Northwestern University by Stephen Colbert, probably the best commencment speech I have seen so far (*). So right now I watched it again.

It is very funny and well delivered, and there is a lot of wisdom in it.

You have been told to follow your dreams. But - what if it's a stupid dream? [...] Thankfully dreams can change. If we'd all stuck with our first dream, the world would be overrun with cowboys and princesses.

There were several times in my life when my dreams changed. Sometimes only a little, but sometimes they changed a lot. So far I am happy with where I got that way. But still, you should try to live your dream. So here is the really important part of the speech:

So, whatever your dream is right now, if you don't achieve it, you haven't failed, and you're not some loser. But just as importantly, if you do get your dream, you are not a winner.

Life is not about winning or losing. Living your dream is not about winning or losing. It's not us against the others or anything like that. For me it also is not about success or being better than others. I want to do what I love and be really good at it. I want to build great stuff and learn as much as I can along the way. And I want to spend time with people I respect and love. The specific goals - what exactly I want to build or learn - might change over time. But this is a good thing, because usually these changes are for a reason.

I want to close with another Colbert-quote. After you have read it, go and watch the two speeches. It only takes 40 minutes, and in my opinion, they are a great way to spend this time!

In my experience, you will truly serve only what you love. [...]
If you love friends, you will serve friends.
If you love community, you will serve your community.

If you love money, you will serve your money.
And if you love only yourself, you will serve only yourself. And you will have only yourself.

So no more winning. Instead, try to love others and serve others, and hopefully find those who love and serve you in return.

(*) Well, I only saw a few on youtube. Anyway.

Posting Type: 

Con-fess: Video of my Session

The videos from this year's con-fess conference are available now. I have embedded a short video of my talk about "Apache Wicket and AJAX" in this blog post. The whole video can be found on the conference pages: http://2012.con-fess.com/en/sessions/-/details/113/Apache-Wicket-and-AJAX.

After seeing the video I must say that I am quite satisfied with how my session went. I think it was much better than the presentations I gave 2-3 years ago. BTW, the table was great for doing the code examples: No sitting down and standing up before/after programming. Still there are several things I have to work on:

  • The way I stand and move does not look like I feel comfortable. The funny thing is that I did feel comfortable during this presentation!
  • Do I move my hands too much?
  • I should not laugh at my own jokes (The audience laughed and I joined. Still, not good.)
  • There are several occations where I use German grammar. I'll have to try to stop that.
  • Some of my sentences still sound like questions. I should work on this even more.
  • Sometimes I changed slides too early, sometimes too late (but mostly it was OK).
  • I should talk more during code examples.

What else could I improve in future presentations? Please contact me and tell me your suggestions!

Posting Type: 

Developer Interviews

I want to start a new series here on my blog: Developer interviews. In the last few years I had the pleasure of working with several good developers. People who created cool stuff. People who have achieved remarkable things. Programmers I look up to. Today I contacted some of them, asking if they'd like to give an interview.

I want to publish these interviews here. But I do not want to interview only "Superstars" or "The best of the best", this is not the criterion. This is about good people in our field who have something interesting to tell. I want to tell the stories of people who deeply care about the craft, art and science of software development. And at the same time, stories of people like you and me. But maybe there will also be superstars on the list - who knows?

If the format works, I will contact more developers. I will also link all the interviews in this article.

Posting Type: 

Playing Chicken

Sometimes, in a conversation or discussion, you are attacked head on. The other person challenges everything you say, does not let you finish your sentences and always has one more objection. My default reaction in a situation like this is to be defensive. Which is probably wrong in any case, but here I want to write about a special situation: The other person is is playing chicken.

You know, chicken, the game you sometimes see on the movies. Where two cars drive head on at a high speed until one of the drivers "chickens out".

In a conversation, interesting things can happen when you do not chicken out. Maybe the other person is on your side and she only wants to challenge you. When you become defensive, nothing new can happen. But when you fight back, new ideas can can develop and a great discussion can emerge. The crash, that would kill the players in a real game of chicken can not happen, so you have nothing to lose. This posting is a note to self: When somebody is playing chicken with you in a discussion, stay head on!

Of course, the other person could also be just an annoying a... . Then there's no fun in playing and you should just leave. The difficult part is to recognise the difference.

Posting Type: 

Confess 2012

The last 2 days I was in Leogang, Austria at the Con-fess conference, where I had a great time. There were good sessions and speakers, and I met many nice people. Leogang is in the middle of nowhere, but that didn't matter, because Hotel Krallerhof, the conference venue, had everything you could wish for. The Salzburg mountains are beautiful, and the weather was good all three days:

Panorama of the Salzburg mountains

My favourite session was Better Presentations by Michael Plöd - although most presentations were good and the speaker lineup was quite impressive. It was nice to meet Ed Burns again! I also had the chance to talk to Kito Mann at dinner and between the sessions. And I finally met Thomas Einwaller who lives and works in the same city as I do.

Hotel Krallerhof HallwaySession The Groovy Ecosystem
People listening to a sessionSession Open Source Portal Servers

My session: Apache Wicket and AJAX

My session went quite well although I think there are a couple of things I could improve for the next time. The whole conference was recorded, so as soon as the video is online I will link it here. I have already uploaded my slides an the code examples from my talk, you can download them right here:

confess_2012_Wicket-Ajax.pdf The slides (and notes) from my talk.
confess_2012_wicket_ajax_sources.zip The source code (+ libraries and Eclipse project) from my talk.

Posting Type: 

What to expect from my Con-Fess talk "Apache Wicket and AJAX"

Next week I will be giving a one hour talk about Apache Wicket and AJAX at Con-Fess Conference 2012 in Salzburg. Yesterday I finished preparing the first draft of the talk, which I will refine over the weekend.

I have several slides, but I hope I will be done with them in 20-30 minutes, because what I really want to show is code. And I also want to leave some time for discussion.

The slides start with a general introduction to AJAX and an introduction to Apache Wicket, both only very basic stuff. Then I will introduce the concepts needed to do AJAX in Wicket: Components, Behaviors and AJAX-specific behavior. This will show that wicket comes with a lot of AJAX functionality out of the box, but sometimes you need more flexibility. In the last part - if there is still time - I want to show how to achieve that, by using jQuery to send an AJAX request to the Wicket backend.

There will be several code examples: I will show how to use components, behaviors, some AJAX behaviors and the jQuery call. I want to do most of the coding live, because I think this way it is easier to follow for the audience. I have prepared a working solution that I can show if time is running short.

I think this is some pretty interesting stuff, especially for people who had not much previous exposure to Wicket. I hope I'll see you there.

Posting Type: 


My name is David Tanzer and I have been working as an independent software consultant since 2006. I help my clients to develop software right and to develop the right software by providing training, coaching and consultanting for teams and individuals.

Learn more...

Subscribe to RSS - David's Blog