Top margin not working with clear:both in firefox

hi

In the below code the top margin is not working with clear:both in firefox.

what is the solution.

vineet


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#holder{
}
#lft{
float: left; background-color:#666666; width:400px;
}
#rht{
float: right; background-color:#00FF00; width:500px;
}
#main_data{
clear: both; margin-top: 10px; background-color:#FF0000
}
</style>
</head>

<body>
<div id="holder">
  <div id="lft">Left</div>
  <div id="rht">Right</div>
</div>
<div id="main_data">Main Data</div>
</body>
</html>

I just did this the other day with my loan underwriter. I felt like I was in the twighlight zone. Didn’t I already explain why it would be needed? To give ie6 haslayout. :slight_smile:

Why would it not be needed then?

I said I may be wrong… but why height:1%; would be needed in this case?

Since the holder div has only taken out of the normal flow elements, its height is next to nothing. So the margin top for the next element applies to… nothing.

To make it grow to wrap its floated child elements, there is a so called fix:

#holder {
    overflow: auto;
}

thanks noonnope

will remember it next time

vineet

Your div holder is probably collapsing because of the floats. Add overflow hidden to #holder. And overflow visible and height 1% to ie6. Or clear the floats some other way.

^ I don’t think hasLayout for IE6 is in play here. But I may be wrong.

You need haslayout in ie6/7 to contain the floats. Overflow hidden gives ie7 haslyaout. Alternatively you could just give it a width (or 10 other things). But that’s the only one that will work in all situations (prob).

… not talking about that one :slight_smile:

I was referring to the fact that height:1%; may not be needed in this particular case.

Do you think overflow gives haslayout for IE6…? That’s the only reason I can think of why you would possibly think IE wouldn’t need a haslayout trigger such as height:1%;

Haslayout is needed to contain floats in IE, and if height:1% is added I’d suggest giving that to IE6 only as to not have problematic problems potentially arise.

So we come full circle :slight_smile:

This particular case, does it need haslayout for IE6?

See… the twighlight zone…

Unable to test, but I’m fairly certain I can say yes. I see no reason why IE6 would be containing the floats, since no property on that element is a haslayout trigger.

As Ericwatson has said numerous times, the height:1% is needed…

@EricWatson
It’s good to know younger generations learned about Arthur C. Clarke :slight_smile:

@RyanReese
That’s why I said I may be wrong. As a general rule, yeah, height:1% is needed. I’m not so sure that it is needed in this particular case.

How would you tackle the containment of floats in IE6 then? I’d love to hear your opinion.

See I once was (and often still am in many cases) a newbie. I read along with every thread and was like a fly to **** everytime someone more knowledgable than myself came in and offered up good advice on a platter. I would try and soak it all in. What I didn’t do was challenge everybody’s advice. Especially good advice. Sorry just not a big fan of that.

@EricWatson

You seem to be determined to make it personal. OK. You should go into politics. You manage to talk much w/o saying zilch :slight_smile:

If I’ve learned anything from the SPF CSS Quizes, is exactly that: challenge ideas. You should try it sometimes. Maybe you’ll learn something NEW.

Sitting pretty and reciting over and over what others tell you earns you The Parrot badge :wink:

On the other hand, questioning methods HAS ALWAYS LED TO BETTER CSS WAYS.

Are we done with philosophy now? Or do you feel the need to tackle other social areas beside banks or literature :slight_smile: That is, if maybe for you, the twilight zone means TV shows at first.

I’m not trying to speak for Eric, but may I refer you to your signature. He isn’t hurting anyone, but you can’t handle honest criticism :p. If Eric was indeed trying to makei t personal I apologize in advance :wink:

The CSS quizzes challenge ideas which were thought impossible. That doesn’t extend so far as to able to ignore the workigns of the browser and the needs of it.

What are you talking about? (Directed at the bold). All CSS is (to learn it) is just learn what others say and when the question arises in this forum, mimic it back. I for one take part in mimicing almost 100%. Everything I learned was purely off forums (though not this one, if you want to see my newbishness then I suggest going over to Devshed and asking for details about a certain “GameYin”…)

Criticism of what? I said a few times: “I may be wrong but…”. What is there to criticise? Running your mouth about sticking religiously to a solution is not criticism, is failing to see a question instead the lack of knowledge, for the sole purpose of feeling high.

I’m talking about the fact that there are STILL solutions discovered that are making current solutions look naive. And that’s not because we limit ourself to mimic. Quizes are just not about that.