css: перекрывающиеся заголовки h1 в плавающих блоках

У меня есть div, включающий три внутренних div, которые все плавают влево. Эти поплавки должны представлять три столбца. Пока все в порядке.

Но если я добавлю заголовки внутри каждого из внутренних блоков, а заголовки будут слишком широкими, заголовки будут перекрываться.

Изображение покажет это лучше, чем 1000 слов:

(Извините за внешнюю ссылку. Но из-за того, что я здесь впервые, у меня недостаточно очков репутации для публикации изображений :))

Мой html-код выглядит так:

     <div id="content_container" class="appearance">
       <div class="column">
         <h1>My headline1111111111111</h1>
         text
       </div>
       <div class="column">
         <h1>My headline2222222222</h1>
           text
       </div>
       <div class="column">
         <h1>My headline333333333333333333333</h1>
         text
       </div>            
       <div style="clear: left;"></div>
    </div>

И вот мой код css:

#content_container {
  position: relative;
}

.column {
  float: left;
  width: 33.33333%;
  padding-right: 10px;
}

.appearance {
  margin: 0 auto;
  width: 60%;  
}

С другой стороны, content_container также является внутренним div другого контейнера-оболочки. Не знаю, имеет ли это значение в данном случае.

Любые идеи, что я мог бы сделать, чтобы исправить это?