CODEWITHSUNDEEP
htmlcss
Cooper
Cooper

Reputation: 103

an element's position moves when entered text

I have made a <div> with a left border and a menu bar that on click on one of the options it looks like the menu is over the the <div>.

now, when there is text in the div (I need it to have text) it moves to the left.

jsFiddles: without text , with text

here is the code:(i need to have the text inside the second div)

<div style="position:absolute; bottom:0; top:39px; right:70%;">
   <div style="border-left:1px solid black; position:absolute; right:0px; background-color:white; top:0%; bottom:0%; height:100%; z-index:-1;">
   </div>
   <div id='settingNev' style="position:relative; top:300px;">
     <ul>
       <li id="Li1" runat="server" class="active">
          <a id="A2" runat="server"><span>Resume</span></a>
       </li>
       <li id="Li2" runat="server">
          <a id="A3" runat="server"><span>Freinds </span></a>
       </li>
     </ul>
   </div>
</div>

how can I fix it so that the style will be the same, so I could enter text into the div. (I don't want to have the div width:0px; because then the text would go out of the div, breaking the lines after each word like in this fiddle

Thanks for the help

Upvotes: 0

Views: 50

Answers (2)

Laurens
Laurens

Reputation: 2607

You can use your last solution where width is set to 0px and to fix the word wrap you can just u white-space:nowrap like this:

<div style="border-left:1px solid black; position:absolute; right:0px; background-color:white; top:0%; bottom:0%; height:100%; z-index:-1; width:0px; white-space:nowrap">

demo: http://jsfiddle.net/2fDQz/84/

However, this is not a very nice way to fix the problem, but your css in the jsfiddle is so messy that I don't know which css you do or don't need.. Try to clean up your css. I made a clean version myself, but possibly deleted css you still needed: http://jsfiddle.net/2fDQz/101/

Upvotes: 1

jsmartfo
jsmartfo

Reputation: 995

Place the border on the right hand side of the element?

<div style="border-right:1px solid black; position:absolute; right:0px; background-color:white; top:0%; bottom:0%; height:100%; z-index:-1;">

Upvotes: 1

Related Questions