Get the items close together and not apart

[alpine]

CSS isnt my strong side, and havent been touching it for a few years.

 

Problem is that the next data row (or data header) doesnt appear where the last one stopped, its a gap between. Probably due to some divs taking space even if they are adjusted upwards.

 

So, any tips on how to improve or correct this ?

 

<style type="text/css">

.checklist_data_container{
position: absolute;
top:0;
left:0;
width: 100%;
background-color: #ddd;
}

.checklist_data_heading{
position: relative;
width: 100%
height: 30px;
background-color: blue;
}

.checklist_data_text{
position: relative;
width: 100%;
height: 60px;
background-color: green;
}

.checklist_data_options_container{
position: relative;
top: -60px;
left: 80%;
width: 20%;
height: 60px;
background-color: yellow;
}

.checklist_data_options_text{
  position: relative;
  height: 20px;
  text-align: left;
  background-color: grey;
}

.checklist_data_options_input{
  position: relative;
  height: 20px;
  top: -60px;
  left: 50%;
  width: 50%;
  background-color: purple;
}

.checklist_data_input_options{
  position: relative;
  min-height: 10px;
  top: -60px;
  text-align: left;
  background-color: pink;
}

</style>



<div class="checklist_data_container">

<!-- new header for data rows -->

<div class="checklist_data_heading">Heading</div>

<!-- new data row -->

<div class="checklist_data_text">Text</div>

<div class="checklist_data_options_container">

<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>

</div>

<div class="checklist_data_input_options">hidden fields</div>

<!-- new data row -->

<div class="checklist_data_text">Text</div>

<div class="checklist_data_options_container">

<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>

</div>

<div class="checklist_data_input_options">hidden fields</div>

<!-- new header for data rows -->

<div class="checklist_data_heading">Heading</div>

<!-- new data row -->

<div class="checklist_data_text">Text</div>

<div class="checklist_data_options_container">

<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>

</div>

<div class="checklist_data_input_options">hidden fields</div>

<!-- new data row -->

<div class="checklist_data_text">Text</div>

<div class="checklist_data_options_container">

<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_text">text klikk</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>
<div class="checklist_data_options_input">KLIKK</div>

</div>

<div class="checklist_data_input_options">hidden fields</div>



</div>

[haku]

Remove the relative positioning from each of those, as well as your top values. From there, use bottom margins on the top element, or top margins on the  bottom element, or a combination of the two, to control the vertical space between elements.

[JustLikeIcarus]

Try this css

body{ margin:0px;}
.checklist_data_container{

width: 100%;
background-color: #ddd;
}

.checklist_data_heading{

width: 100%
height: 30px;
background-color: blue;
}

.checklist_data_text{
width: 80%;
height: 60px;
background-color: green;
display:block;

}

.checklist_data_options_container{
margin-left:80%;
margin-top:-60px;
width: 20%;
height: 60px;
background-color: yellow;
}

.checklist_data_options_text{
  position: relative;
  height: 20px;
  text-align: left;
  background-color: grey;
}

.checklist_data_options_input{
  position: relative;
  height: 20px;
  top: -60px;
  left: 50%;
  width: 50%;
  background-color: purple;
}

.checklist_data_input_options{

  text-align: left;
  background-color: pink;
}

[haku]

Using negative margins is rarely a good idea. It's necessary at times, but for the most part, it's not very cross-browser friendly.

 

Much better to do as I said before and shrink the bottom margin/padding on the top element, and shrink the top margin/padding on the bottom element. Right now they are pushing against each other.