CODEWITHSUNDEEP
csscss-float
UCC
UCC

Reputation: 1

How can I make my DIV clear?

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

Upvotes: 0

Views: 4507

Answers (4)

Midas
Midas

Reputation: 7131

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

Upvotes: 1

Mient-jan Stelling
Mient-jan Stelling

Reputation: 532

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>

Upvotes: 0

Yanick Rochon
Yanick Rochon

Reputation: 53546

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

Upvotes: 2

Dave Kiss
Dave Kiss

Reputation: 10485

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

Upvotes: 0

Related Questions