IE7 bottom margin on float issue

**jbanger** · Aug 30, 2007, 07:42

The problem

I have a div floated left, applying margin-bottom, and a clearing div beneath it applying margin-top.

In Firefox, the margins are collapsed, in IE7 they are combined. I've googled for an elegant solution but so far no luck. (Possible solutions I've come across are applying padding instead of margin, creating extra non floated markup and applying the margin to that).

Demo

I've created a demo here: http://joshamos.com/css/ie7-float-margin.html

The gap between the black and red boxes is double in IE7 than in Firefox.

Forgive me if this exact issue has been addressed previously.

**ninjabiscuit** · Aug 30, 2007, 08:26

Hi,

Can you just remove the margin-top on the footer and make the margin-bottom on the header 40px? This has the effect of making the margin between the two boxes a standard 40px on both ie7 and firefox.

...maybe I'm over simplifying matters..?

**jbanger** · Aug 30, 2007, 08:44

I'm actually after the collapsed margin effect (the 20px) due to the way I use them throughout my site.

I could use an IE specific stylesheet and adjust the margins of one div to emulate collapsing, but it would be just apples if there was a display:inline type of fix out there

**all4nerds** · Aug 30, 2007, 08:46

Hello

The top margin collapse on the first container after a float (or in a container) in FF, and other standard compliant browsers think this is Funy , like ninjabiscuit mentioned set margins on floats only

for demo only

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		
		<title>ie7-float-margin</title>	
		
		<style type="text/css" media="screen">
			* {
				margin: 0;
				padding: 0;
			}	
		
			#header {
				float: left;
				width: 100px;
				height: 100px;
				margin-bottom: 20px;
				background-color: black;

			}
			
			#footer {
				width: 100px;
				height: 100px;
				margin:20px 0;
				background-color:red;
			}
			.x{height:0px;background:#0000ff;overflow:hidden;clear:left;}
		</style>
		
		
	</head>
	
	<body>
		
		<div id="container">
			<div id="header">

			
			</div>
			<div class="x"></div>
			<div id="footer">
				
			</div>
		</div>
		
	</body>
</html>

**jbanger** · Aug 30, 2007, 09:30

In my demo where we are talking about a single div, that's a nice easy solution, but it's really along the same lines as applying padding instead of a margin, or adding extra markup. I'm after something that forces the margins to collapse in IE as it saves a lot of messing around creating custom styles for things that have common margins. I'm starting to think it doesn't exist, but thanks for your help so far though guys.

**all4nerds** · Aug 30, 2007, 09:43

Hello

You can always re arange things a margin bottom ?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ie7-float-margin</title>
<style type="text/css" media="screen">

*{margin: 0;padding: 0;}

.header,.footer{width:100px;height:100px;margin-bottom:20px;}

.header {float:left;background:black;}

.footer{clear:left;background:red;}

</style>
</head>
<body>

<div id="container">

<div class="header"></div>

<div class="footer"></div>
<div class="footer"></div>
<div class="footer"></div>
<div class="footer"></div>
<div class="footer"></div>

</div>


</body>
</html>

**jbanger** · Aug 30, 2007, 09:59

That's another option, I'll experiment with only applying bottom margins throughout a site. cheers.

**all4nerds** · Aug 30, 2007, 10:04

Originally Posted by jbanger

That's another option, I'll experiment with only applying bottom margins throughout a site. cheers.

Hello

If this is for space between lines ? Tags ? padding is far saver to use

**jbanger** · Aug 30, 2007, 10:14

Yeah, I think it all comes back to the actual benefit that comes with collapsing margins. I had a quick test with the bottom margins only and it doesn't seem practical. A heading following a paragraph lacks adequate space for example.

I really like the idea of collapsing margins. It means you can apply your margins in one place and regardless of what follows what (except of course a float it seems) things work out smashingly. I'm on a quest to find a real solution to this as they make things so much better.

**jbanger** · Aug 30, 2007, 10:21

Hold up a minute, is it Firefox that has this wrong?

According to the w3c spec: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

**all4nerds** · Aug 30, 2007, 10:24

Originally Posted by jbanger

Yeah, I think it all comes back to the actual benefit that comes with collapsing margins. I had a quick test with the bottom margins only and it doesn't seem practical. A heading following a paragraph lacks adequate space for example.

I really like the idea of collapsing margins. It means you can apply your margins in one place and regardless of what follows what (except of course a float it seems) things work out smashingly. I'm on a quest to find a real solution to this as they make things so much better.

Hello

There is an other problem with margins (and default tag margins) on top they work outside/on there containers, and in some cases on the bottom of , older FF's are notorious for this behavior

The SitePoint Forums have moved.

User Tag List

Thread: IE7 bottom margin on float issue

Thread Tools

Display

IE7 bottom margin on float issue

Bookmarks

Bookmarks

Posting Permissions