mpsn Posted March 5, 2012 Share Posted March 5, 2012 Hi, I have a sidebar div that holds my sidebarItem div, but I'm curious as to why the text doesn't wrap around if I decide to , meaning it should add a new line type in a long string of text w/o a break so I mean the black background color for my sidebarItem div should "grow",right? But doesn't and just goes out of my sidebarItem div and I had to meticulously change text length to ensure it doesn't go off the sidebarItem so specifically I have gibberish text and not sure why 977 goes out of my sidebarItem and consequently outside sidebar wrapper, shouldn't extra text just wrap around to make a new line (so black border I have has new line made to accomodate the 977 if the text is currently at the width of sidebarItem since sidebarItem's width is fixed inside sidebar div of width:240px My CSS: .sidebar/*WRAPPER that holds the indiv sidebar div itms*/ { float:right; width:240px; padding:10px 5px 400px 5px; background-color:#90EE90; border:1px solid black; } .sidebarItem/*holds itms inside the sidebar box: e.g. ticker, visual funds tracker*/ { background-color:green; padding:5px; border:1px solid black; } .sidebarItem h1/*text style for headings*/ { font:bold 25px Verdana, Arial, sans-serif; text-align:center; color:#FFF; background-color:black; } .sidebarItem h2/*text style for sub-headings*/ { font:italic 20px Verdana, Geneva, sans-serif; text-align:center; } .sidebarItem h3/*text style for paragraphs*/ { font:bold 14px "Trebuchet MS", Helvetica, sans-serif; background-color: #EEE8AA; } HTML <html> <head></head> <body> <div class="sidebar"> <div class="sidebarItem"> <h1>asfsdfsafsddd dd gg dddddddddddd977<!--Why doesn't the 977 wrap around so that the black background color of this sidebarItem div expand?--> d </h1> <h2>asfsdfsafsd asfsdfsafsdfsafsdas asfsdfsafsdasfsddas asfsdfsafsdasfsdfsd</h2> <h3>asfsdfsafsd asfsdfsafsd asfsdfsafsd asfsdfsafsd asfsdfsafsd asfsdfsafsd asfsdfsafsdasfsdfsafsd</h3> </div><!-- END sidebarItem--> </div><!-- END sidebar--> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/258301-why-doesnt-text-wrap-around-the-div/ Share on other sites More sharing options...
AyKay47 Posted March 5, 2012 Share Posted March 5, 2012 so I mean the black background color for my sidebarItem div should "grow",right? no, you have already answered this question yourself. The parent div's width is fixed at 240px, so no it will not grow. If you want it to expand don't set a fixed width. The text does not wrap correctly because it is all on string, and you have not allowed it to be broken. To allow it to break, you will need to adjust the CSS accordingly. .sidebarItem/*holds itms inside the sidebar box: e.g. ticker, visual funds tracker*/ { background-color:green; padding:5px; border:1px solid black; word-wrap: break-word; //added this } Quote Link to comment https://forums.phpfreaks.com/topic/258301-why-doesnt-text-wrap-around-the-div/#findComment-1324103 Share on other sites More sharing options...
mpsn Posted March 6, 2012 Author Share Posted March 6, 2012 Thanks a bunch! Quote Link to comment https://forums.phpfreaks.com/topic/258301-why-doesnt-text-wrap-around-the-div/#findComment-1324317 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.