Text is not wrapping inside absolute positioned div

Question

I'm having an issue getting text to wrap inside an absolute positioned div. I think the problem is I have a the width set to 100% which I have to have because the div resizes with the page. How can I get the text to wrap.

Here's my code:

#content {
  background: black;
  min-height: 60px;
  background: #0a0a0a;
  position: relative;
  padding: 0;
  overflow: hidden;
}

#content .entry {
  background: white;
  position: absolute;
  text-wrap: normal;
  top: 0;
  left: 200px;
  padding: 10px;
  width: 100%;
  height: 100%;
  min-height: 50px;
  border-left: 1px solid #262626;
}

<div id="content">
  <div class="entry">
    <-----text---->
  </div>
</div>

Solution

The problem is that you declare a width of 100% AND a left of 400px on the .entry elements. The total width will be 100% + 400px which will make the .entry element wider than its container. It does wrap its text, but you won't see the rightmost 400px of it.

The problem is that you cannot define the width and the padding/margin/left/right/etc on the same element. You need a nested structure to get it done. So, add an extra div in the content > entry html structure and define the width on the first one and the padding on the second.