CODEWITHSUNDEEP
htmlcsspositionexpand
earlmanster
earlmanster

Reputation: 53

CSS absolute positioned container size autofit to relative positioned divs inside

There are three divs: a container, with absolute position, top, left coords, and two divs inside, with relative positions, top and left coords.

I'd like to expand the container's size to the positioned div elements inside dynamically (so I don't like add width/height to the container element).

My code is:

https://jsfiddle.net/ruzds7bk/

css:

.container {
  position: absolute;
  border: 1px solid red;
}

.box {
  position: relative;

  width: 50px;
  height: 70px;
  background: #c00;
}

html:

<!-- I'd like that the container's size would be fitted to its elements. -->
<div class="container" style="top: 80px; left: 20px;">
  <div class="box" style="top: 50px; left: 75px;">absolute</div>
  <div class="box" style="top: 100px; left: 130px;">absolute</div>
</div>

<!-- Something like that, but without adding container's width and height. -->
<div class="container" style="top: 470px; left: 20px; width: 200px; height: 350px;">
  <div class="box" style="top: 100px; left: 75px;">absolute</div>
  <div class="box" style="top: 200px; left: 130px;">absolute</div>
</div>

Upvotes: 0

Views: 1677

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Use margin-top and margin-left in place of top and left for the inner .box elements

.container {
  position: absolute;
  border: 1px solid red;
  height: auto;
}

.box {
  position: relative;
  width: 50px;
  height: 70px;
  background: #c00;
}
<div class="container" style="top: 80px; left: 20px;">
  <div class="box" style="margin-top: 50px; margin-left: 75px;">absolute</div>
  <div class="box" style="margin-top: 100px; margin-left: 130px;">absolute</div>
</div>

Upvotes: 0

Related Questions