css: overlapping headlines h1 in floated divs

Question

I have a div including three inner divs which are all floated left. This floats should represent three columns. So far, everthing's ok.

But if I add headlines inside each of the inner divs and the headlines are to wide, the headlines will overlap.

An image will show it better than 1000 words:

(Sorry for external link. But due to I am new here I have not enough reputation points to post images :) )

My html code looks like this:

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

And here is my css code:

#content_container {
  position: relative;
}

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

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

The content_container on the other hand is also an inner div of another wrapper container. Don't know whether it matter in this case.

Any ideas what I could do, to fix it?

Answer 1

I think word-break, with which you can specify if you want to break line within a word, will do the trick:

.column { word-break:break-all; }

jsFiddle demo.

You can read more about the word-break property here.

Answer 2

You can use

.column { overflow: hidden; }

to truncate the header or

.column { overflow-x: scroll; }

to make it scrollable.