Expand div to text length with absolute positioned elements - html

Question

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 1

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>

Answer 2

Always avoid absolute positioning when possible. Here is one solution with minimal CSS to accomplish what you want.
CSS:
.masterContainer {
height: 800px;
background: blue;
width: 300px;
}
.container {
width: 300px;
background: yellow;
margin: 10px 0px;
}
.summary {
background: lightblue;
display: block;
}
.id {
background: green;
}
.xyz {
background: red;
float: right;
}
HTML:
<div class="container">
<span class="id">
KEY / ID
</span>
<span class="xyz">ABCD EFGH</span>
<span class="summary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
<div class="container">
<span class="id">
KEY / ID
</span>
<span class="xyz">ABCD EFGH</span>
<span class="summary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="container">
<span class="id">
KEY / ID
</span>
<span class="xyz">ABCD EFGH</span>
<span class="summary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
</div>
Fiddle