CSS how to automatically resize my div to fit the content?

Question

Please see my http://jsfiddle.net/ob5rmnk2/7/ and as you can see my paragraph texts are displaying outside of my div content.

How can change the CSS so that the texts can automatically resize to fit into my content's div? I need the content div to automatically resize I believe.

If you make the screen smaller you can see the text starts to collapse and it display beyond the content's block height which I want to fix. I want it to always be display inside the content div.

Also, how can I make my buttons so that they can automatically have a 50px gaps (or some fixed space) from the paragraphs above it all the time?

Answer 1

Changes I did:

1. word-wrap: break-word; in test-inner-right css class so that we break on the actual text (since we do not really have spaces)
2. Removed height: 100px; in both test-inner-right andtest-inner-left` css classes. Since having fixed height would not make it "auto resize"

Snippet:

.test-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
}

.test-prompt-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .8;
}

.test-prompt-content {
  position: relative;
  z-index: 5;
  background: yellow;
  padding: 20px 15px;
  margin: 10% auto;
  width: 350px;
  max-width: 100%;
  border: 3px solid blue;
  max-width: 80%;
}

.test-prompt-content-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #3F3F3F;
  text-align: center;
}

.test-prompt-content-buttons {
  margin-bottom: 10px;
  padding-top: 200px;
  text-align: center;
  margin-top: 20px, auto;
}

.test-inner-right {
  padding-right: 10px;
  float: right;
  /*width: 300px;*/
  max-width: 80%;
  word-wrap: break-word;
  text-align: left;
}

.test-inner-left {
  float: left;
  /*width: 10px;*/
  max-width: 10%;
  color: blue;
  text-align: right;
  padding-left: 20px;
}

.test-inner {
  border: 3px solid red;
}

<div class="test-prompt">
  <div class="test-prompt-backdrop"></div>
  <div class="test-prompt-content">
    <div class="test-prompt-content-title">
      <p class="test-1"></p>
      <br /> Title
    </div>

    <div class="test-inner">

      <div class="test-inner-left">
        <p class="test">

        </p>
      </div>
      <div class="test-inner-right">
        <p>
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </p>
        <p>
          bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </p>
      </div>

      <div class="test-prompt-content-buttons">
        <div>
          <button id="continue" type="button">Continue</button>
        </div>
        <br />
        <div>
          <button id="cancel" type="button" class="btn btn-default">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Try using word-break: break-all in your CSS .test-inner-right, like this:

.test-inner-right {
    padding-right: 10px;
    /*width: 300px;*/
    width: 80%;
    height: auto;
    text-align: left;

    word-break: break-all;
}

Answer 3

your word is not wrapping because it is just one word without spaces, if you want to fit that inside use word-wrap: break-word; alternatively you can use word-break: break-all; depends on how you want to break them