Clear: Both Problem

Hi cmodonn,
Have you come across this: http://www.csscreator.com/attributes/containedfloat.php

Hope that helps

Hi cmodonn,
I may have been a little too quick with my last post.
Is your problem showing in IE only?
Try adding position: relative; to the floats.

Otherwise provide a link so it is easier to solve.

Absolutly...and have been using heavily in this project. However, for some reason, when I tried it on this problem, it didn't seem to help.

Here's how I did it.

<div id="contentContainer">
	<div id="brandContainer" class="clearFix"><!-- "clearFix" is my class name for your floatcontainer" -->    
		<div id="brandImage"> </div>
		<div id="brandText"> </div>
	</div>
	<div id="brandAction"> </div>
</div>

In addition to having the CSS code for the "clearFix", from the old CSS, I removed the "clear:both" from the #brandAction container.

I STILL seem to have the same problem...and I'm not quite sure why. I don't know if I'm overlooking something or what,...but in this case, the clearFix didn't seem to work.

Am I loosing it (it's quite possible....i've been working overtime on this project for two weeks.)

Chad

No...it occurs in both IE and FF.

I'll try position: relative here and let you know (sorry...no link...working on my company's development site.)

OK.....I used the floatContainer fix, and shockingly....it works in IE but NOT FireFox (??????????????????????????????).

Here's my revised code:

<div id="leftColumn">
	<p>Left Column</p>
</div>
<div id="contentContainer">
	<div id="brandContainer" class="clearFix">
		<div id="brandsImage">
			<p>Brands Image</p>
		</div>
		<div id="brandsText">
			<p>Brands Text</p>
		</div>
	</div>
	<div id="brandsAction">
		<p>Brands Action</p>
	</div>
</div>
<div id="footer">
	<p>Footer</p>
</div>

And the CSS:

/* Really goofy looking CSS (in terms of colors), but I'm just using it for the example */

#leftColumn {
	height: 300px;
	background-color: #CCC;
	width: 150px;
	float: left;
}
#contentContainer {
	margin-left: 160px;
	background-color: #9C6;
}
#footer {
	height: 50px;
	background-color:#F00;
	clear: both;
}


#brandsImage {
	width: 250px;
	height: 200px;
	background-color:#999;
	float: left;
	position: relative;
}
#brandsText {
	margin-left: 260px;
	background-color:#03F;
}
#brandsAction {
	background-color: #C93;
}
/*------------------------------*/
/* Clear Float Fix              */
/*------------------------------*/
.clearFix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden; 
}
/* Mark Hadley's fix for IE Mac */ 
.clearFix {
	display: inline-block;
}    
/* Hides from IE Mac \*/
* html .clearFix { 
	height: 1%;
} 
.clearFix {
	display:block;
}
/* End Hack - DO NOT REMOVE OR MOVE THIS COMMENT */

Sooooo.....any thoughts? I tried using position: relative; in the div containers that are floating, but it didn't work. I'm baffled that this works in IE and not in FF....which leads me to ask..."OK....what's wrong?"

Need your help....thanks!!

Hi Cmodonn,

I wish I could be more help in this reply, but I am still sort of confused what your desired page looks like. Would you be able to create a quick graphic to show us how you want your layout to look? :roll:

I've played with your layout extensively and have applied everything I can think of but it contuinues to want to clear the left float column.

I originally thought this was an old bug in FF which was meant to have been corrected, but now am wondering as I have read that the correct behaviour of clear is to clear all previous floats,but whether that should mean a float that is adjacent to a containing block with a floated element cleared I'm not sure.

This is a problem that I have run across before but am not really sure of the fix other than to re-think the layout.

The only other thing that does work is to remove the clearfix from #brandcontainer and replace it with overflow:auto but you will need this for IE:

* html #brandContainer {
height: 1%;
}

Hugo.

I think you are confusing the two things, self containment (or expansion to contain floats) and clear effect containment.

A clear will clear all floats within the same display context. To contain the affects of a clear you must create a new display context (float, position:absolute, position:fixed) or use an overflow setting other than visible.

IE, kind of avoids this affect through the wierd behaviour of its hasLayout property, which in this case acts a little like using an overflow setting other than visible.

So the solution is:

html>body #brandContainer {overflow: hidden;}

Note, this will have the side-effect of preventing margins collapsing outside #brandContainer.

I dont think there is confusion really Chris.

So the clear property does clear all previous floats, It's just not that clear that this in relation to a display context.

Cmodenn you will still need to give IE the height fix, and is the child selector really required on the overflow rule ?

Hugo.

I was not sure, what you are trying to achieve, but from the above posts I assumed you wanted something like this...
[please see attached file... test2.htm]

Hope this helps

Maybe, maybe not. Without it IE will float the third piece of text below the second and adjacent to the first. However, I didn't look too deeply and there could well be some other style change which will correct that behaviour.

Or, you could simply wrap the two columns in the main area in their own container, and use the overflow rule. The Holly hack should be applied to give IE a layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>clearing test</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

#leftColumn {
   float: left;
   width: 150px;
}

#contentContainer {
   margin-left: 170px;
}

#brandImage {
   float: left;
   width: 200px;
}

#brandText {
   margin-left: 210px;
}

#brandAction {} 

.holder {
    overflow: hidden;
    }

/* \*/
* html .holder {
    height: 1px;
    overflow: visible;
    }
/* */

/*]]>*/

</style>
</head>

<body>
  <div id="leftColumn">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
    erat volutpat. Ut wisi enim ad</p>
  </div>

  <div id="contentContainer">
<div class="holder">
    <div id="brandImage">

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
      diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad</p>
    </div>

    <div id="brandText">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
      diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad</p>
    </div>
</div>

    <div id="brandAction">

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
      diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad</p>
    </div>
  </div>
</body>
</html>

cheers,

gary

Gary that's exactly the layout I was working on, there is a container/holder for the two columns in the original layout posted; #brandContainer, and it's why I mentioned that it would require the Holy hack for IE.

I have to admit Chris that I don't see the behavior that you describe if IE reads the overflow rule, but then it can't harm to hide it from IE.

Ah, I figured someone would have done that, but I got tired head trying to follow all the suggestions.

If you use the Holly Hack and the {overflow: hidden} rule, IE, um, hides the overflow, so you must either hide the rule from IE or remove it with the * html hack. I didn't look at {overflow: auto;}; that may work ok.

cheers,

gary

which is what I suggested

html>body #brandContainer {overflow:hidden;}

is the opposite of

#brandContainer {overflow:hidden;}
* html {overflow: visible;}

which I admit is probably preferable as its easier to have hacks only targetted at one browser family where they can be shifted off into their own stylesheet and linked with a conditional comment.

I love confused threads; as Gary said "or use overflow auto" as I originally suggested, but maybe I haven't thought that through carefully :roll:

Hugo.

Part of the problem is that there are a variety of ways to clear/enclose a float element.

1. A float element will enclose its own child float.
2. An overflow value other than the default, 'visible', will cause an element to enclose its content.
3. An element of {display: table;} will enclose its content.
4. An explicit 'clear' just prior to closing an element will cause it to enclose its float.

Any of these may have conflicts with other elements or style rules. So you probably need to test if you're at all unsure. On the other hand, it is likely that at least one method will work as advertised.

cheers,

gary

[/]

Yes, but (my understanding is) this isn't about enclosing the float. Its about containing the effects of clear. And (d) won't do that.

No it isn't Chris, it is about containing a float, the clear was a problem due to it's use in the clearfix clearing technique and the problem was in using clear but it was to aid in the containing of the floated element, yes the idea was that the third div cleared the float but that actually was a by product of containg the float in the #brandContainer div.

Hugo.

Ah! The fog lifts.

dunno I think it's descended on me then, having re-read my last post; does it make any sense or am I just loosing the plot ?

and where is the OP in all this :roll: have we just scared him off.

Hugo.

Wow.....what happens when you get to busy to come back to the thread you started........

Thanks for all of your responses. I'm under such a time crunch right now I hope I can make this work. Since I haven't had much time, I wasn't able to read everything in the thread but I promise I'll go back and review everthing.

Since it was asked, here are some screen shots of A.) what I'm wanting to achieve B.) what I'm actually getting.

Here's what I'm trying to achieve. [I just did this in photoshop...not actual design I'm using]

And here is the results I'm getting:

Here's the rough HTML and CSS that I'm using:

	<div id="header">Header</div>
	<div id="leftColumn">Left Column
		<p>Ut aliquip ex ea commodo consequat. Velit esse cillum dolore excepteur ......</p>
		<p>Ut enim ad minim veniam, consectetur adipisicing elit, qui officia deserunt........</p>
		<p>Sed do eiusmod tempor incididunt excepteur sint occaecat sunt in culpa..........</p>
	</div>
	<div id="contentContainer">
		<div id="brandContainer" class="clearFix">
			<div id="brandImage">Brand Image</div>
			<div id="brandText">Brand Text
				<p>Ut labore et dolore magna aliqua. Excepteur sint occaecat ut enim .................</p>
				<p>Excepteur sint occaecat ut enim ad minim veniam, sed do eiusmod tempor incididunt.......</p>
			</div>
		</div>
		<div id="brandAction">Brand Action</div>
	</div>
	<div id="footer">Footer</div>

<style>
body {
	background-color: #0D3BD0;
}
#header, #leftColumn, #contentContainer, #footer {
	background-color: #FFF;
}
#brandImage, #brandText, #brandAction {
	background-color: #D5D5D5;
}
#header, #footer {
	height: 50px;
}
#header {
	margin-bottom: 10px;
}
#leftColumn {
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
#contentContainer {
	margin-left: 160px;
	padding: 10px;
}
#brandImage {
	width: 200px;
	height: 200px;
	float: left;
}
#brandText {
	margin-left: 210px;
}
#brandAction {
}
#footer {
	clear: both;
}

/*------------------------------*/
/* Clear Float Fix              */
/*------------------------------*/
.clearFix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden; 
}
/* Mark Hadley's fix for IE Mac */ 
.clearFix {
	display: inline-block;
}    
/* Hides from IE Mac \*/
* html .clearFix { 
	height: 1%;
} 
.clearFix {
	display:block;
}
/* End Hack - DO NOT REMOVE OR MOVE THIS COMMENT */
</style>

I'm basically posting this to clairify what I was initially asking.

I'm off to try some of your fixes. I'll report back and let you know what I end up with. Hugo, Chris, kk5st, Udi....you guys are great, you know that?

Yeah.....it works.

Here's what I tried.

/*-- Version #1 --*/

#brandContainer {
	overflow:auto;
}
* html #brandContainer {
height: 1%;
}

/*-- Version #2 --*/

html>body #brandContainer {
overflow: hidden;
}

* html #brandContainer {
height: 1%;
}

/*-- Version #3 --*/
#brandContainer {
    overflow: hidden;
    }

/* \*/
* html #brandContainer {
    height: 1px;
    overflow: visible;
    }
/* */ 

I realize that version 2 and 3 are nearly identical....actually all three are nearly identical. But...all of them work. Is there any advantage/disadvantage to using one method over the other?

The layout is understood and the problem stems from the clear property and the clearfix rules, dump them. The solution rests (and here there is some dispute on the detail ) on using the overflow property.

Either overflow hidden or auto and also height:1% for IE on the #brandContainer

It may be a case that you need to hide the overflow from IE using
html>body #brandContainer as Chris has suggested.

I found that overflow:auto and * html #brandContainer{ height:1%;}
seemed to work without problem but it's worth checking which method works best, I may well have overlooked something when testing to see if this was stable.

I would read Chris's post carefully and Gary's to determine the best course of action, but the problem is solvable.

Hugo.

This so odd.

I've mocked up the page and I got the fix to work.

Once I applied it to my main pages (done in XSLT using XML), the fix doesn't work anymore.....make no sense.......

Getting frustrated.....

Explain doesn't work any more ? which of those fixes are you using and is the fix failing in all browsers, how is IE coping with XML/XSLT

As to which version to use this was the point of debate, but I would have thought that your version 3 was perhaps using overflow:auto for IE unnecessarily

Don't suppose you have a live link to look at.

Hugo.

P.S sorry my last post missed yours.

Hugo,

No worries...I actually really like the theoretical discussions about CSS. You'd always hope that it make us better at the craft we do.

Explain doesn't work anymore? Sorry...should have been more descriptive.

Basically, the "fix" didn't seem to apply itself to my brandContainer...I was getting a float clearing problem. It was failing in all browsers.

I have a pretty sizeable style sheet...I'll have to investigate further to see if something is being overwritten. Is there anything special that needs to be done in the style sheet when applying the Holly Hack (because of the escape characters [ /* \*/] )?

Unfortunatly I don't have a link because we are working internally (moreover b/c of the XSL/XML, I just can't "put it out there" for viewing).

Thanks for all of your continued help. I'm glad to see the response to this...I think this has been very vaulable for me.

If you are using Firefox.

Try using the DOM Inspector or Web Developers/CSS/View Style Information tool to see what styles rules are being applied to what elements.

To answer the question re: the comment hack; it should be fine as you've written it in the earlier post, I think that your supposition about the rules being somehow negated is probably close to the truth.
As Chris says use the Dom inspector to examine the rules and elements, it's a powerful tool.

Let us know how you progress.

Hugo.