How can I make my DIV clear? - css

Question

I have the following code:
<div class="clearfix">
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
</div>
<div class="mdl_ftr"></div>
.clearfix:after{
clear: both;
bdy: ".";
display: block;
height: 0;
visibility: hidden;
}
.mdl_ftr {
min-height: 69px;
}
.mdl_ftr {
background: Red;
min-height: 45px;
}
and an example fiddle
I would like the background color of mdl_ftr to start AFTER the labels. Is there a simple way that I can make this happen. Right now the mdl_ftr DIV starts right at the top left corner of the first label. What I want is it to follow the labels and not appear as a background to them.
Help would be much appreciated

Answer 1

It is common, when using floating elements, to have another element to clear content in the layout. Something like :
<div class="clearfix">
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
</div>
<div class="clearfloat"></div>
<div class="mdl_ftr"></div>
And simply apply the CSS rule to this element like
.clearfloat { clear: both; }

Answer 2

Please never forget overflow:hidden again!!
Replace your full CSS with:
.clearfix {
overflow:hidden
}
.mdl_ftr {
background:red;
min-height:45px
}
Or even better in this case:
HTML:
<div style="float:left; padding-right:1%">
<label class="adm">Created</label>
</div>
<div style="float:left; padding-right:1%">
<label class="adm">Created</label>
</div>
<div class="mdl_ftr"></div>
CSS:
.mdl_ftr {
background:red;
min-height:45px;
clear:both
}
And perhaps use an ID for your footer instead of a class. (I guess you have only one footer on your page?)

Answer 3

If you mean after as in to the right of the labels, then put your mdl_ftr inside of your clearfix and float:left;; otherwise, set a height to your clearfix

Answer 4

Yea its pretty easy. i put a div.clear at the
end of your div.clearfix. And added this to your
css code. .clear { clear: both; height: 1%; }
<div class="clearfix">
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
<div class="clear"></div>
</div>
<div class="mdl_ftr"></div>