Css Div Height Not Expanding to Fit Content or Wrapping Content

.each-message-box {  width: 100%;  display: block;  overflow: auto;  height: auto;  margin: 1px;}
.each-message {  width: 270px;  height: 100px;  margin: 2px;  border: 1px solid #ccc;  overflow: hidden;  height: auto;  word-break: break-all;}
.each-message-date {  border: 1px solid #ccc;  font-size: 10px;  color: #ccc;  text-align: left;}
.each-message-content {  width: 100%;  border: 1px solid #ccc;  text-align: left;  border-radius: 10px;  height: auto;}

<div class="message-box">  <div class="each-message-box">    <div class="each-message">      <div class="each-message-date">Date</div>      <div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent      </div>    </div>  </div></div>

HTML / CSS: Div not expanding to height of content

#interaction-options-container .dialogue-container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    //height: 32px;
    background-color: #333333;
    float: none;
}

DIV not expanding to content if some long text put into it

Solved the problem!

I've read somewhere that elements with position: absolute are taken out of the page flow, and thus are considered zero-height for min-height purposes. I also tried setting min-height: 200px for #cntr, and a small white block appeared. I still don't know why the min-height: 100%made the white div disappear completely, but now it works well.

So, changing the

div {position: absolute}

to

div (position: relative}

adjusting the coordinates accordingly and setting min-height: 100% instead of height: 100% for #cntr solved the problem for me.

Thanks for all help and ideas and hope this answer will be helpful.

divs width (or height whichever one I can get to work) will not expand with content

You can apply max-width: fit-content; to the parent div plus word-break: break-word; to wrap the text after hitting the max width limit.

DIV not expanding with content - used methods (min-height, overflow:hidden,clearing div..none worked :-( )

Welcome to the fun world of HTML & CSS.

As jmore pointed out in his answer, the problem you faced was due to position:absolute which caused the element(s) to be taken out of the DOM flow. If you haven't had a chance yet, take a look at this MDN article that explains how position works. As you probably saw from our comments, it's an important concept to understand :)

MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/position

What you're trying to accomplish can be done a couple ways (as jmore pointed out), but the easiet way is to wrap your elements and then float the wrapper to the right. Using your mark up, you'll see that I wrapped the two divs in a container div, additionalAnswersWrapper.

<div class="additionalAnswersWrapper">
    <div class="add_answer_label">Add Answers(optional)</div>
    <div class="answers_textboxes">
        <table id="dataTable">
            <tr>
                <td>
                    <input type="text" required="required" name="BX_NAME[]">
                </td>
            </tr>
        </table>
        <div class="clear"></div>
    </div>
</div>

Once you've wrapped your divs, you'll want to just float that element right.

Here's a fiddle demonstrating: http://jsfiddle.net/83PTq/4/

I wanted to take the time and point out a few other things that will help you as you continue learning.

• You should avoid using tables for layout. Tables are for tabular data, so using it to wrap your input is bad practices.
• There's a concept of web design called "responsive design". While I won't get into responsive design too much (it's beyond the scope of this question), there is an idea that your page should work across all devices. By hardcoding widths (for instance, the textarea), you've constrainted the element. You COULD use media queries to change the width, but it's much easier to let the parent take care of that.

Hopefully this answer was helpful.

Expanding a parent <div> to the height of its children

Try this for the parent, it worked for me.

overflow:auto; 

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

Div not expanding by content

You've missed to add css rule overflow:hidden in #wrapper css.

---

Related Topics