javascript - Text wrap issue when pushed to side -

javascript - Text wrap issue when pushed to side -

so, have sort of dilemma.

i want text wrapped initially, on-load, when element (on sides) width set value (200px) want moved side.

the issue is, when element (a menu) comes in, shrinks downwards text element beingness pushed side. div moves side, text wraps pushing downwards.

see, here it's wrapped, that's how should look

then, when menu opened,

i've tried using white-space:nowrap; removes word wrapping completely.

i've googled this, issue tends can't keyword things well, or can't find way solve this.

the end result should word wrapped text in beginning, element containing text should pushed off side out of view.

css:

/** menu css **/ #menu-bar-container { float:left; background-color:#2c2c2c; height:100%; } /** "news" element supposed pushed side **/ .app-content { overflow: hidden; position: relative; } .app-section { position: relative; width:100%; }

html:

<div id="server-news-container" class="app-content app-scrollable" style="height: 453px; overflow: scroll;"> <div class="app-section"> <i id="news-icon" class="fa fa-exclamation-triangle fa-lg"></i> <span id="news-text">in-development, app may stop working @ point in time. have been warned.</span> <div id="news-date">sunday, june 15 2014</div> </div> <div class="app-section"> <i id="news-icon" class="fa fa-info-circle fa-lg"></i> <span id="news-text">test of info thing</span> <div id="news-date">saturday, june 14 2014</div> </div> </div>

any help or pointers on appreciated.

as chong yu pointed out, it's position issue. need alter content { left:width-of-menu } when menu present, , homecoming content { left:0 } when menu collapses.

if don't explicitly set width of menu, you'll need grab @ somepoint in code. ease of explanation, let's assume set 100px wide.

.parent.content, .parent.menu { position:relative } .content { left:0; position:absolute } .menu { display:none; width:100px } menu button clicked , made visible: .content { left:100px } .menu { display:block }

javascript html css