AHHrgg - Containg floats - why NOT?

Hi all, :sick::injured::goof:

http://help.nuvemk.com/floats/

Tried:

overflow:hidden; on container;

clearfix method applied on container;

float:left applied on container;

clear div after the floated elements;

given height, in px in % to the container;

The container is a block element, is wide enough;

I have defined a explicit width just in case.

the floated elements have width defined;

Why can the container grab those floats?! Have put a background shiny red there, and I was hopping to see it.

Removed the float declaration from coluna-direita; the read appears.
But, of course, it doesn’t float.

[update2]
The element is placed on the normal-flow, hence, after our floated element.
This is wrong.

If we remove the float from coluna direita, it will put it self on the normal-flow, it will ignore the previous floated element (out-of-the-flow),
but the coluna-direita inline content (the text) will not ignore it.
If coluna-direita (not coluna-esquerda) would have space for it, it will put is text next to the float. So coluna-direita need to have space for the float and his own inline content (because his inline-content (the coluna-direita one) feels the float. :slight_smile: - in order to place it on it’s right side. (YES?! :x)
[/update2]

Help please
:injured:

Márcio - struggling with floats since 2009 and counting!

I have put a clear element INSIDE the container.
It contains.

I have give overflow:hidden; on container.
It contains.

Something went wrong, and I haven’t found what. But making this simplification process worked out.

The floats are clear but I’m not.
War was over but I didn’t know how.

Please confirm my assumptions on [update3] here: I’m ready to understand your explanations, so I believe.

I was saying that:
Removed the float declaration from coluna-direita; the read appears.
But, of course, it doesn’t float.

Because:
The element is placed on the normal-flow, hence, after our floated element.

However, this was wrong.

And here is a what I hope is a correct explanation:
[update3]
If we remove the float from coluna direita, it will put it self on the normal-flow, it will ignore the previous floated element (out-of-the-flow),
but the coluna-direita inline content (the text) will not ignore it.
If coluna-direita (not coluna-esquerda) would have space for it, it will put is text next to the float.
So, coluna-direita need to have space for the float and his own inline content (because his inline-content (the coluna-direita one) feels the float. :slight_smile: (YES?! :x)
[/update3]

Regards,
Márcio - the “float struggler”. :slight_smile:

if you are going to use a clearing element, it must go INSIDE the div you want to clear, not after.

Bunch of other little niggles in there - for legacy support reasons don’t even waste time trying to set things on HTML, set them on BODY, don’t waste time trying to get a specification not even out of draft yet (HTML5) to work, your meta tags are gibberish, etc, etc…

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="pt"
	xml:lang="pt"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="pt"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Float clearing working just fine.
</title>

</head><body>

	<h1>Float containment made easy</h1>
	
	<div id="container">
	
		<div id="coluna-esquerda">
			<p>
				bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
				Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
				bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
				Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
			</p><p>
				bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
				akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
			</p>
		<!-- #coluna-equerda --></div>
		
		<div id="coluna-direita">
			<p>
			bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
			Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
			akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
			Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
			akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
			</p><p>
			Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
			Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
			akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
			Bla bla bla bla bla bla bla bla asfas asfas askajs askasjklasjkl aksask
			akasfhjas akjhs asj asj s da s akjhfkah ja jas jkfh jashf sbkjafjakja as
			</p>
		<!-- #coluna-direita --></div>
		
	<!-- #container --></div>

</body></html>

screen.css


/* reset to null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}
/* end reset */

body {
	font:normal 100&#37;/140% 'helvetica neue',helvetica,arial,sans-serif;
	background:url(../Img/background_nuvemk_tiny.png);
}

h1 {
	padding:0.25em;
}

p {
	padding:0.5em;
}

#container{
	overflow:hidden; /* wraps floats */
	width:800px; /* also trips haslayout, so IE will wrap floats */
	background:red;
}

#coluna-esquerda {
	width:200px;
	float:left;
	display:inline; /* prevent IE margin doubling bug */
	margin-right:4em;
	background:green;
}

#coluna-direita {
	width:200px;
	float:left;
	background:blue;
}


Works just fine. I suspect you were slapping the overflow on the wrong element… Also, overflow does not work in IE7/earlier, so you need a haslayout trigger - which you already had in the form of ‘width’.

One of the bug fix kluges MSFT put into IE7 was making overflow values other than visible trigger hasLayout.

cheers,

gary

Though that was for IE8, not 7… eh, six of one half-dozen of the other really when there are still over 370 million people using 6 - many of whom can’t or don’t want to change.

yes, I found it in the meanwhile and the previous post talks about it.

sorry, i thought that styling the HTML tag is a common thing to do, so that we can avoid font-size bug on older IE versions when using em units ? Am I wrong?

We can use HTML5 even if we don’t use all their elements and capacities, no?I don’t see what is the issue. Is perfectly valid HTML.

What’s wrong on setting a charset and a language? They also validate… :?

Thanks for the example provided. I tend to not use a reset when I cannot understand all about it (I’m very new to css, despite the readings about it). A re-set is a nice thing but isn’t cross browser consistency a quimera? Shouldn’t we use a reset only when we need one?

Please advice,
Márcio