CODEWITHSUNDEEP
htmlcss
NullBy7e
NullBy7e

Reputation: 546

Text Floating Out of Sidebar

The text goes out of my div and there is no fixed width on it so i don't know why its doing this. The sidebar should not extend any further than 200px.

HTML

     <div id="sidebar">
        <div class="side_box">
            <div class="side_box_title"><span>VAULT FEED</span></div>
            <div class="side_box_content">
                dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
            </div>
        </div>
    </div>

CSS

#sidebar {
    max-width: 200px;
    margin-top: 1%;
    margin-left: 1%;
    float: left;
}
.side_box {

}

.side_box_title {
    height: 25px;
    padding-top: 2px;
    text-align: center;
    color: white;
}

.side_box_content {
    border: solid 1px;
    padding-left: 5px;
    padding-right: 5px;
}

Upvotes: 0

Views: 172

Answers (2)

vernak2539
vernak2539

Reputation: 596

Or you could try 

.side_box_content {    
    ...
    word-wrap: break-word;
}

Upvotes: 1

RGLSV
RGLSV

Reputation: 2058

I'd go with css3 word - break property. -> Word break css

just add to .side_box_content class the following:

.side_box_content {
    border: solid 1px;
    padding-left: 5px;
    padding-right: 5px;


    word-break: break-all;
}

Have a go at: -> Test drive

Cheers!

Upvotes: 1

Related Questions