clear only 1 float;

[jcombs_31]

I think i've run into this before, but never had a good solution.  If I have a nav floated left of the main content, and then an element within the main content also floated left, how can I clear the content float without clearing the left column float:

 

example is attached....

 

 

 

 

 

[attachment deleted by admin]

[ToonMariner]

Try giving your content div position relative or absolute - taking ot out of teh doc flow should solve your problem and limit clears to the parent element (he says - it may not work but sure I have done it).

[dbrimlow]

Yesterday I JUST "re-discovered" a great solution to this problem. It is a "div" float clear.

 

For the css:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

 

For the HTML, add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. That's it!

 

Here is the sample code with css:

 

/*XXXXXXXXXXXXXXXXXXXX First Demo rules start here XXXXXXXXXXXXXXXXXXXXXXX*/

.guillotine-box {
float: left; 
width: 200px; 
border: 4px solid #5a5; 
background: #ddd; 
margin: 0 40px 10px 0;
color: #fff;
font-size: .8em;
}

.guillotine-float {
float: right; 
width: 130px; 
border: 3px solid #ff8; 
background: #766;
color: #ffd;
}

.guillotine-box a:hover {
background: #aaa; /*** Any hovered BG will trigger bug ***/
}


/*XXXXXXXXXXXXXXXXXXXX Second Demo rules start here XXXXXXXXXXXXXXXXXXXXXXX*/

.floatholder {
border: 4px solid #000;
margin: 10px 0 0;
background: #dc8;
font-size: 1.2em;
}

.floatbox {
float: left;
width: 35%;
background: #773;
border: 3px solid #f55;
color: #ffd;
}

.floatbox p {margin: 0;}

.floatholder p {margin: 0;}

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
  
.clearfix {
display: inline-block;
}  

    /* Holly Hack Targets IE Win only \*/
    * html .clearfix {height: 1%;}
.clearfix {display: block;}
    /* End Holly Hack */

<!-- now the the html -->

<div style="margin: 0pt 20%; height: 1%;">
<!-- NOTE: This div wrapper prevents IE/Win in quirks mode from using BODY as the base for measuring the % width 
on .floatholder. This wrapper must be dimensionally defined before IE<6 will use it as the percentage base. -->

<div class="floatholder">
<div class="floatbox">
<p>This float is not enclosed by the surrounding div container. </p>
</div>
<p>This container lacks the fix.</p>
</div>

<div style="height: 20px; clear: both;"></div> <!-- Just a spacer div between the demos -->

<div style="border: 4px solid rgb(0, 0, 0); margin: 10px 0pt 0pt; background: rgb(221, 204, 136) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-size: 1.2em;" class="clearfix floatholder"> 

<!-- the "clearfix" classname MUST be the first class in the attribute for the JS to work! -->
<div class="floatbox">
<p>See how this float no longer protrudes out of the containing box, with no extra clearing element used in the container!</p>
</div>
<p>This float container has a class attribute of "clearfix", which applies the :after fix, or the Holly hack, depending on the browser.</p>
</div>

</div>

 

Here is the link to the position is everything article:

 

http://www.positioniseverything.net/easyclearing.html

 

 

[bronzemonkey]

Alternatively, if you are happy to have the extra markup and avoid all that css. Simply create a css class:

 

.clear {clear:both}

 

and then insert

 

<div class="clear"></div>

 

At the very bottom of your float.

[dbrimlow]

The "clear both class" is not intuitive and does not work for nested floats in FF.

 

That's why I needed to find an alternate solution. The simple "clear both class"  was hiding my background graphic in FF.

 

Again, read this, it covers the clear:both and why it doesn't work - http://www.positioniseverything.net/easyclearing.html

 

All the extra css is to make it 100% cross browser compatible (including IE/Mac).