FireFox IE 7 css layout - Why? [Archive]

andrew1234

07-19-2007, 06:27 PM

Hi
below i have attached a screen shot and code of my question....

Can you please tell me why the yellow block does not behaive the same in FIREFOX as in IE

But if I insert an image (curently commented out in the code below ) before the closing tag of the yellow block then it behaives .

Why does the yellow block not see that it has content in side it in FIREFOX.

Thanks..

<html>
<head>
<style>

.block{ border: 1px solid #FF0000; width:350px; height:150px; background:#66Adff; float:left; }

.main{ margin:auto; width:800px; height:auto; background-color: #FFFF00; border: 1px solid #00FF00; padding:20px; }

.square{ border: 1px solid #000000; width:100px; height:100px; background:blue; }

</style>
</head>

<body>
<div class="main">

<div class="block">
<div class="square"> </div>
</div>

<div class="block">
<div class="square"> </div>
</div>


</div>
</body>
</html>

http://www.hamandmushroom.com/csshelp/browsers_half.gif

srule_

07-19-2007, 07:53 PM

Your problem has to do with clearing.

I had a question to do with the same sort of problem .

Aerospace_Eng_ derected me to site that explains what is happening and how to fix the problem. you should check it out to:http://www.positioniseverything.net/easyclearing.html