Question3r Question3r - 1 year ago 44
CSS Question

Make the parent div as big as its child

I got some div in a parent div. The parent div should only be as big as its child divs.

So this is the current view



function record(id, title, description, content, dateOfCreation) { // the object
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}

function init(){
var elements = []; // all records get stored here

for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(
i,
"title " + i,
"description " + i,
"content " + i,
"date " + i));
}

$(elements).each(function (index, currentRecord) { // create the div containers
var recordContainer = $("<div></div>");
recordContainer.addClass("recordContainer");
$(document.body).append(recordContainer);

recordContainer.append($("<div>" + currentRecord.title + "</div>"));

recordContainer.append($("<div>" + currentRecord.description + "</div>"));

recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));

recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
});
}

init(); // call the routine

.recordContainer{
margin: 10px;
border: solid;
border-width: 1px;
border-radius: 2px;
border-color: #e8e9e9;
box-shadow: 1px 1px 1px #999999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>





So I want
recordContainer
having a relative size. When looking for some information, I tried out adding
display: inline;
to "recordContainer". But then doing this, the container gets weird (?). You need to try it out, then you will see what I mean.

How can I achieve my desired div?

Answer Source

If you need them to be narrow but remain stacked vertically, use display: table, see the snippet below.

If you need them to be narrow and go onto the same line (and possibly wrap if that no longer fits), use display: inline-block.

function record(id, title, description, content, dateOfCreation) {
  this.id = id;
  this.title = title;
  this.description = description;
  this.content = content;
  this.dateOfCreation = dateOfCreation;
  this.lastEdited = dateOfCreation;
}

function init() {
  var elements = []; // all records get stored here

  for (var i = 0; i < 3; i++) { // create some objects
    elements.push(new record(i, "title " + i, "description " + i, "content " + i, "date " + i));
  }

  $(elements).each(function(index, currentRecord) {
    var recordContainer = $("<div></div>");
    recordContainer.addClass("recordContainer");
    $(document.body).append(recordContainer);

    recordContainer.append($("<div>" + currentRecord.title + "</div>"));
    recordContainer.append($("<div>" + currentRecord.description + "</div>"));
    recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
    recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
  });
}

init(); // call the routine
.recordContainer {
  margin: 10px;
  border: solid;
  border-width: 1px;
  border-radius: 2px;
  border-color: #e8e9e9;
  box-shadow: 1px 1px 1px #999999;
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download