user6731422 user6731422 - 2 months ago 6
CSS Question

Trying to place a form at the top of a div

I have a small box placed at the bottom of the page. I am trying to place a form right above a div but the form keeps jumping into the bootstrap div.

this is the html attempt
EDITTED:
I also want the row across the form to have a background color as thesame with the breadcrumbs but it is not showing

<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>


This is the css controlling the form

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


with the above, the form keeps overlapping into the div. Please how can I place the form right above the div.

Answer

Clear the float.

     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>

Comments