Попытка поместить форму в верхней части div

Question

У меня есть небольшая коробка в нижней части страницы. Я пытаюсь поместить форму прямо над div, но форма продолжает прыгать в загрузочный div.

это попытка html РЕДАКТИРОВАТЬ: я также хочу, чтобы строка в форме имела цвет фона, такой же, как в хлебных крошках, но она не отображается

<div style="padding:1px; background-color: #F2F2F2;">
    <form class="rightiest" method="post" action="/logout">
            <input class="btn btn-link" type="submit" value="Leave Group"/>
    </form>
</div>
 <div class="breadcrumb">
            <div class="wrap">
                <div class="container" style="text-align: center;font-size: 80%;">
                <strong> Please hold we will soon attend to you shortly</strong>



                </div>
            </div> 
</div>

Это CSS, контролирующий форму

 form.rightiest {float:right; margin-top:0px; margin-bottom:7px;}

с вышеизложенным, форма продолжает накладываться на div. Пожалуйста, как я могу разместить форму прямо над div.

Answer 1

Очистить поплавок.

     form.rightiest {float:right;
       margin-top:0px;
       margin-bottom:7px;}
    
    .breadcrumb {
       clear: both;
    }

<form class="rightiest" method="post" action="/logout">
            <input class="btn btn-link" type="submit" value="Leave Chat"/>
    </form>
     <div class="breadcrumb">
                <div class="wrap">
                    <div class="container" style="text-align: center;font-size: 80%;">
                    <strong> Please hold we will soon attend to you shortly</strong>
    
    
    
                    </div>
                </div> 
    </div>

Answer 2

Вы должны очистить свои поплавки.

.breadcrumb {
   clear: both;
}