CODEWITHSUNDEEP
htmlcss
J.K.A.
J.K.A.

Reputation: 7404

On next line text is going out of div box

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

Upvotes: 4

Views: 16045

Answers (4)

Zeeshan
Zeeshan

Reputation: 11

Just use CSS property I am facing same issue but it is solved by

#divname {
    word-wrap: break-word;
}

Upvotes: 1

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

Live DEMO

<div class="title-box">    
    <div class="box1" style="background:#000; background-position: left center; margin:5px 0px 5px 5px;">
        <h1>Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS</h1>
    </div>
</div>

CSS

  .title-box{width:100%; word-wrap:break-word;}
.title-box .box1{font-size: 15px;  padding:10px;}
.title-box .box1 h1{padding: 5px; text-align:justify; color: #fff;}​

Add only a word-wrap:break-word; to .title-box

Upvotes: 1

Rohit Kumar
Rohit Kumar

Reputation: 1028

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

Upvotes: 2

NullPoiиteя
NullPoiиteя

Reputation: 57322

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/

Upvotes: 5

Related Questions