Chris Chris - 7 months ago 15
HTML Question

Expand div to text length with absolute positioned elements

I am trying to create some container divs in a column and which have a paragraph within them of varying length.

I'd like to expand the div to the correct height to allow for all the text however as my elements are set as

positioned: absolute
, I think it is causing an issue.

Please see me fiddle: http://jsfiddle.net/p7pue2kx/1/

In the first box, the text fits nicely. However when the text is much longer, it overflows and the div container does not expand accordingly. I'd like to ensure there is a min-height but the max is determined by the text size.

Are there any better ways of doing this positioning that may allow for my text to expand the container.

Thanks in advance.

Answer

Don't use absolute positioning where there is no need to use it :)

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.masterContainer {
  height: 800px;
  background: blue;
  width: 300px;
}
.container {
  position: relative;
  width: 100%;
  background: yellow;
  min-height: 60px;
  margin: 10px 0px;
  padding: 10px;
}
.summary {
  clear: both;
  width: 100%;
  overflow: hidden;
  background: lightblue;
}
.id {
  float: left;
  background: green;
}
.xyz {
  float: right;
  background: red;
}
<div class="masterContainer">
  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>

  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>

  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>

</div>