Почему добавление новых элементов в div нажимает на весь div вверх?

Question

Это очень странная проблема, и я не знаю, с чего начать. Я попытался изменить свои divs от относительного позиционирования до абсолютного, но это, казалось, не повлияло на проблему.

Когда есть определенное количество элементов в моих #all_galleries DIV он выровнен:

Но если добавить слишком много элементов DIV выталкивается вверх:

Почему этот div подталкивается вверх, когда к нему добавляются элементы?

main.css

body { 
    background-color: rgb(238, 238, 238); 
    font-family: "Comic Sans MS"; 
} 

main { 
    width: 80%; 
    margin: 0 auto 0 auto; 
    height: 700px; 
} 

header { 
    background-color: black; 
    position: absolute; 
    width: 100%; 
    top: 0px; 
    left: 0px; 
} 

h1 { 
    color: #2F96E8; 
    display: inline-block; 
} 

h1 a { 
    color: inherit; 
    text-decoration: none; 
} 

#search_query { 
    height: 18px; 
    width: 200px; 
} 

#new_search { 
    position: absolute; 
    right: 80px; 
    top: 30px; 
    display: inline-block; 
} 

#signout { 
    position: absolute; 
    right: 76px; 
    top: 10px; 
} 

main { 
    position: relative; 
    top: 100px; 
    text-align:center; 
} 

#create_gallery { 
    background-color: rgb(96, 201, 231); 
    color: white; 
    width: 20%; 
    height: 50%; 
    font-size: 250%; 
} 

#create_group { 
    background-color: rgb(141, 197, 62); 
    color: white; 
    width: 20%; 
    height: 50%; 
    font-size: 250%; 
} 

#galleries_tagline { 
    position: relative; 
    bottom: 170px; 
    right: 80px; 
    color: white; 
    font-size: 20px; 
} 

#groups_tagline { 
    position: relative; 
    bottom: 220px; 
    left: 130px; 
    color: white; 
    font-size: 20px; 
} 

.gallery_image { 
    display: block; 
    margin: 0 auto 0 auto; 
    width: 30%; 
} 

#groups { 
    text-align: left; 
} 

#groups li { 
    padding: 20px 0 20px 0; 
} 

#all_groups { 
    display: inline-block; 
    position: absolute; 
    bottom: 131px; 
} 

#all_galleries { 
    position: absolute; 
    bottom: 55px; 
    left: 350px; 
    display: inline-block; 
} 

#login { 
    color: white; 
    text-decoration: none; 
} 

приложение/просмотров/галереи/index.html.erb

<h2>Choose Your Creation</h2> 
<%= link_to '<button type="button" id="create_gallery">Galleries</button>'.html_safe, new_gallery_path %> 
<%= link_to '<button type="button" id="create_group">Groups</button>'.html_safe, new_group_path %> 
<p class="tagline" id="galleries_tagline">Show some pix</p> 
<p class="tagline" id="groups_tagline">Share with friends</p> 

<div id="all_galleries"> 
<h3>Current Galleries</h3> 
    <% @galleries.each do |gallery| %> 
    <p><%= link_to gallery.name, gallery %></p> 
    <% end %> 
</div> 

<div id="all_groups"> 
    <h3>Current Groups</h3> 
    <% @groups.each do |group| %> 
    <p><%= link_to group.name, group %></p> 
    <% end %> 
</div> 

Answer 1

Таким образом, простой ответ заключается в том, что вы используете position: absolute, а его относительный родитель - main, так как контейнер становится больше, ваши значения bottom не остаются неизменными. Большая проблема заключается в том, что вся ваша структура кода является откровенно беспорядочной. Это действительно нужно реструктурировать, что я сделал. Единственное отличие заключается в том, что я удалил использование тегов button и вместо этого использовал div s.

FIDDLE

HTML

<main> 
    <h2>Choose Your Creation</h2> 

    <div class="button-wrapper">   
    <a href="/galleries/new" class="button-container"> 
     <div id="create_gallery" class="button gallery"> 
      <div class="text-wrapper"> 
      Galleries 
      <p class="tagline" id="galleries_tagline">Show some pix</p> 
      </div> 
     </div> 
    </a> 

    <div id="all_galleries"> 
     <h3>Current Galleries</h3> 
     <p><a href="/galleries/1">Barbecue listing</a></p> 
     <p><a href="/galleries/2">Outback Crocz!</a></p> 
     <p><a href="/galleries/3">leet pix</a></p> 
     <p><a href="/galleries/4">Mountains</a></p> 
     <p><a href="/galleries/6">Star-Trek-Memes</a></p> 
     <p><a href="/galleries/1">Barbecue listing</a></p> 
     <p><a href="/galleries/2">Outback Crocz!</a></p> 
     <p><a href="/galleries/3">leet pix</a></p> 
     <p><a href="/galleries/4">Mountains</a></p> 
     <p><a href="/galleries/6">Star-Trek-Memes</a></p> 
    </div> 

    </div> 

    <div class="button-wrapper">  
     <a href="/groups/new" class="button-container"> 
     <div id="create_group" class="button group"> 
      <div class="text-wrapper"> 
       Groups 
       <p class="tagline" id="groups_tagline">Share with friends</p> 
      </div> 
     </div> 
     </a> 

     <div id="all_groups"> 
     <h3>Current Groups</h3> 
     <p><a href="/groups/1">Hip photographers anon</a></p> 
     <p><a href="/groups/2">Camper Clan</a></p> 
     <p><a href="/groups/3">Crocodiles Anonymous</a></p> 
     </div> 
    </div>  

</main> 

Добавлен CSS

.button-wrapper{ 
    display: inline-block; 
    vertical-align: top; 
    height: 100%; 
} 

.button-wrapper a.button-container{ 
    display: block; 
    height: 50%; 
    text-decoration: none; 
} 

.button{ 
    height: 100%; 
    color: white; 
    font-size: 250%; 
    border-top: 2px solid #cccece; 
    border-left: 2px solid #cccece; 
    border-bottom: 2px solid #68797e; 
    border-right: 2px solid #68797e; 
    padding: 10px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.button.gallery{ 
    background-color: #60c9e7; 
} 

.button.groups{ 
    background-color: #60c9e7; 
} 

.text-wrapper{ 
    vertical-align: middle; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 2

Это выталкивается вверх, потому что #all_galleries ДИВ абсолютно позиционирован на дно.

Возможно, вам будет лучше использовать плавающие divs для каждого столбца, и пусть поток контента будет естественным. Вы должны использовать только абсолютное позиционирование в особых случаях, когда ничто другое не выполняет работу.