All I want is to have the button in the second box displayed as a block element so that it expands to fill the container -- but when I set the button element to display:block -- it overflows the container (parent), see the following:
http://jsfiddle.net/MgcDU/7747/
Any ideas? What am I missing?
My CSS:
a:link { color:#0040FF;text-decoration:none; }
a:visited { color:#0040FF; }
a:hover { background-color:#82B6EA;color:#FFFFFF;text-decoration:none; }
a:active { color:#0040FF; }
body { color:black;font-style:normal;font-size:10pt;font-family:Arial, Helvetica, sans-serif;padding:0;margin:0; }
.body_1 { margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px; }
.grid_1 { margin:8px 0 0 0;padding:0;overflow:hidden; }
.grid_1_left { float:left;width:240px;margin:0;padding:0; }
.grid_1_right { margin:0 0 0 245px;padding:0 0 0 8px; }
.grid_1_right_bld { margin:0 0 0 245px;padding:0 0 0 8px;border-left:2px #AAAAAA dotted; }
.btn, a.btn
{
background-color:#D3D7D7;color:#333333;display:inline-block;padding:6px 12px;margin-bottom:0;text-align:center;white-space:nowrap;vertical-align:middle;
cursor:pointer;border:1px solid transparent;border-color:#D3D7D7;
-webkit-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
-moz-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
}
.btn:hover,
.btn:focus,
.btn:active { background-color:#AEB1B1;color:#333333;border-color:#AEB1B1;text-decoration:none;outline:0; }
.btn_success, a.btn_success { color:#FFFFFF;border-color:#64b92a;background-color:#64b92a; }
.btn_success:hover,
.btn_success:focus,
.btn_success:active { color:#FFFFFF;border-color: #50a118;background-color:#50a118; }
.btn_lg { padding:8px 14px;font-size:12pt; }
.btn_block { display:block;margin:0;padding:0;width:100%; }
.box_1 { border:1px solid #5C6666;margin:0; }
.box_1_body { background-color:#FFFFFF;border-top:1px solid #5C6666;margin:0;padding:6px; }
.box_1_title { background-color:#5C6666;color:#FFFFFF;margin:0;padding:6px;text-align:center; }
My HTML
<div class="body_1">
<div class="grid_1">
<div class="grid_1_left">
<div class="box_1">
<div class="box_1_title">Box 1</div>
<div class="box_1_body">
<a href="#" class="btn btn_success">Stays in the Box</a>
</div>
</div>
<br>
<div class="box_1">
<div class="box_1_title">Box 2</div>
<div class="box_1_body">
<a href="#" class="btn btn_success btn_block">Does NOT stay in the Box</a>
</div>
</div>
</div>
<div class="grid_1_right">
main body content
<br>
<a href="#" class="btn btn_success">Btn 1</a>
<a href="#" class="btn btn_success">Btn 2</a>
<br><br>
Note how the buttons can align without being stacked (ie: inline-block) must remain in .btn selector class
</div>
</div>
</div>
This is because you are setting the width on .btn
to 100% and you also have padding, which will add the padding on top of the 100% width. This is making the block spill out of the parent element.
What you want is this (display:inline-block;
has changed to display:block;
):
.btn,
a.btn {
background-color: #D3D7D7;
color: #333333;
display: block;
padding: 6px 12px;
margin-bottom: 0;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-color: #D3D7D7;
-webkit-transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
-moz-transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
}
and then remove the width:100%
from .btn_block
EDIT
Here is an updated jsfiddle
http://jsfiddle.net/932Fa/
It is all about the BOX-SIZING
CSS property. The new standards seem counter-intuitive to me. Bootstrap and other frameworks will set everything to {box-sizing: border-box;}
, but when you drop to your own CSS, the default these days is {box-sizing: content-box;}
.
Either deal with your Paddings & Borders explicity, or just put
{box-sizing:border-box;}
at the top of your CSS and then boxes will 'behave'.
Problem solved !!
Added the following to get higher CSS specificity and everything works as it should now.
.btn_block, a.btn_block { display:block;width:100%;padding-right:0;padding-left:0; }
See updated JSFiddle: http://jsfiddle.net/U8YhJ/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With