d4rty d4rty - 1 month ago 11
CSS Question

Is it possible to place absolut positioned elements automatically among themselves?

Is it still possible to automatically place for examples

div
elements among themselves if they are positioned
absolut
?

In the code snippet there are three
div
elements which are placed among themselves. Is it somehow possible to delte the css style instructions for
#elem2
and
#elem3
and construct a general rule that the
div
elements should placed among themselves with an margin of e.g.
10px
? So that I can easily add new
div
elements (variable height) with the css class
column1
and don't have to worry about the
margin-top
respectively
margin-bottom
.



#containerGraph {
position: relative;
width: 700px;
height: 400px;
border: 1px solid black;
overflow:scroll;
}

/* set the position attribute for all div elements inside the mainContainer*/
#containerGraph > div {
position: absolute;
}

.paramElement {
width: 200px;
max-height: 90px;
border-radius: 18px;
text-align: center;
background-color: #e6e6e6;
color: #4d4d4d;
font-family: Verdana, Helvetica, sans-serif;
padding-bottom:5px;
font-size: small;
}

.column1{
margin-left:10px;
}

#elem2{
margin-top : 40px;
}

#elem3{
margin-top : 117px;
}

<div id="containerGraph" class="relative">

<div class="paramElement column1" id="elem1">
first
</div>

<div class="paramElement column1" id="elem2">
second with very large text text text text text text text text text text text text text
</div>

<div class="paramElement column1" id="elem3">
third
</div>


</div>




Answer

This is a strange need, and I don't see how to solve it the way the problem is posed.

However it seems that, if an absolute position is needed, it should be relevant (and so useful) only against the containerGraph, but clearly not for each one among others.

So a solution might be to:

  • insert a child <div> of your containerGraph, with an absolute position
  • it will contain the (formerly absolute) other <div>s

You can see it working in this snippet:

$('body').click(function() {
  $('#elem2').remove();
  $('#sub-container').append('<div  class="paramElement column1" id="elem4">fourth</div>');
});
#containerGraph {
    position: relative;
    width: 700px;
    height: 400px;
    border: 1px solid black;
    overflow:scroll;
}

/* set the position attribute for all div elements inside the mainContainer*/
#containerGraph > div {
    position: absolute;
}

.paramElement {
    width: 200px;
    max-height: 90px;
    border-radius: 18px;
    text-align: center;
    background-color: #e6e6e6;
    color: #4d4d4d;
    font-family: Verdana, Helvetica, sans-serif;
    padding-bottom:5px;
    font-size: small;
}

.column1{
margin-left:10px;
margin-bottom: 10px;
}
/*
#elem2{
 margin-top : 40px;
}

#elem3{
 margin-top : 117px;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click anywhere to change
<hr />
<div id="containerGraph" class="relative">
<div id="sub-container">
  <div class="paramElement column1" id="elem1">
    first
  </div>
  
  <div class="paramElement column1" id="elem2">
    second with very large text text text text text text text text text text text text text 
  </div>
  
   <div class="paramElement column1" id="elem3">
    third
  </div>
</div>

</div>