Samuel Stiles Samuel Stiles - 7 months ago 16
HTML Question

How do I prevent this <button> from leaving the borders of its parent <div>?

I'm running into a weird issue when trying to float a button to the right;

Un-floated:

No float

Floated right (I want it to appear in the bottom right hand corner, but still within bounds):

Floated right

HTML:

<div class="portlet box red modify-menus-page-portlet">
<div class="portlet-title">
<div class="caption"><i class="icon-external-link"></i>Custom URL</div>
</div>
<div class="portlet-body" style="display: block;">
Add a menu link to a custom URL.
<br>
<br>
<div class="control-group">
<div class="controls">
<input type="text" placeholder="Enter custom text..." class="m-wrap span12">
<input type="text" placeholder="Enter custom URL..." class="m-wrap span12">
</div>
</div>
<button style="float:right;" class="btn red add-menu-link-button">Add <i class="icon-arrow-right"></i></button>
</div>
</div>


CSS:

.modify-menus-page-portlet {
margin-left: 24px;
}

.portlet.box.red {
border: 1px solid #ef8476;
border-top: 0;
}

.portlet.box {
padding: 0px !important;
}

.modify-menus-page-portlet {
margin-left: 24px;
}

.portlet {
clear: both;
margin-top: 0px;
margin-bottom: 25px;
padding: 0px;
}

.portlet.box .portlet-body {
background-color: #fff;
padding: 10px;
}
.portlet-body {
clear: both;
padding: 0;
}

Answer

Add overflow:auto to your .modify-menus-page-portlet rules:

.modify-menus-page-portlet {
    margin-left: 24px;
    overflow:auto;
}