What is causing the meta box in the the screenshot below to not bound it’s content? And how do I get it to expand and contain the checkbox containing divs?
I’ve included the meta box and the css below.
Thank you for your time and consideration,
Tim
Figure 1.
Meta box function
function _mpact_meta_box() {
printf( '<p><label for="%s">%s</label></p>', '_mpact_description', __('Select the applicable options', 'mpact_plugin') );
?>
<div class="mpact-container">
<div class="mpact-row mpact-one-half mpact-firstcol mpact-left">
<label for="meta-checkbox">
<input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-1'][0], 'yes' ); ?> />
<?php _e( 'Option 1', 'mpact_plugin' )?>
</label><br />
<label for="meta-checkbox-two">
<input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-2'][0], 'yes' ); ?> />
<?php _e( 'Option 2', 'mpact_plugin' )?>
</label><br />
<label for="meta-checkbox">
<input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-3'][0], 'yes' ); ?> />
<?php _e( 'Option 3', 'mpact_plugin' )?>
</label><br />
<label for="meta-checkbox-two">
<input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-4'][0], 'yes' ); ?> />
<?php _e( 'Option 4', 'mpact_plugin' )?>
</label>
</div>
<div class="mpact-row mpact-one-half mpact-gutter mpact-left">
</div>
<div class="mpact-rows mpact-one-half mpact-secondcol mpact-left">
<label for="meta-checkbox">
<input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-1'][0], 'yes' ); ?> />
<?php _e( 'Option 5', 'mpact_plugin' )?>
</label><br />
<label for="meta-checkbox-two">
<input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-2'][0], 'yes' ); ?> />
<?php _e( 'Option 6', 'mpact_plugin' )?>
</label><br />
<label for="meta-checkbox">
<input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-3'][0], 'yes' ); ?> />
<?php _e( 'Option 7', 'mpact_plugin' )?>
</label><br />
<label for="meta-checkbox-two">
<input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-4'][0], 'yes' ); ?> />
<?php _e( 'Option 8', 'mpact_plugin' )?>
</label>
</div>
</div>
<?php
}
The CSS
.mpact_plugin {
width: 100%;
position: absolute;
}
.mpact_plugin:after {
content:".";
display:block;
clear:both;
visibility: hidden;
line-height: 0;
height: 0;
}
.mpact-container {
width: 100%;
position: absolute;
}
.mpact-container:after {
content:".";
display:block;
clear:both;
visibility: hidden;
line-height: 0;
height: 0;
}
.mpact-left {
float: left;
}
.mpact-right {
float: right;
}
.mpact-one-half {
width: 48%;
}
.mpact-row.mpact-one-half.mpact-firstcol {
}
.mpact-row.mpact-one-half.mpact-secondcol {
}
.mpact-row.mpact-gutter{
width:4%;
}
Remove floats and absolute postioning from your metabox style::
You don’t need all the unnecessary styling, plus I’ve removed the unnecessary gutter empty div. You can achieve this with right margin. Also on your right div, you had left class, I changed that to right class
.mpact-right
.