On next line text is going out of div box

Question

Following is my HTML :

<div class="title-box">    
    <div class="box1" style="background-image:url(/common/images/arrow-r.png); background-repeat: no-repeat; background-position: left center; margin:5px 0px 5px 5px;">
        <h1>Welcome to the PHP and CSS</h1>
    </div>
</div>

And Following is my CSS :

.title-box {
    border: 1px dashed #CCC;
    float: left;
    width: 540px;
    margin-bottom: 20px;
    word-wrap:break-word;
}

.title-box .box1 {
    font-size: 15px;
    padding: 5px;
}

.title-box .box1 h1 {
    padding: 5px; 
    text-align: left;
    color: #fff;
    margin-left: 35px;
}​

Here the <h1> tag is containing the title. If the title contains more text like :

<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h1>

Then its going to the next line but the next lines text is going out of div box. I provided the width to the main div still its going out of div box. I have also tried to add width to <h1> tag but still problem persist.

Any help. Thanks

Answer 1

its because you have used the width 540px in .title-box

after removing width http://jsfiddle.net/au5Jf/

but it will still go in newline till width of .title-box is less than width of all content

if you want to stick content in one line than you can set width width:950px; to .title-box http://jsfiddle.net/XQXV2/

Answer 2

Actually your div width is fixed and your text has width more than div so it is going out. set div width to auto

.title-box {
    border: 1px dashed #CCC;
    float: left;
    width: auto;
    margin-bottom: 20px;
}