Clear: both getting funky in Firefox

M

magictree

New Member
I have three divs inside of a bigger one. The first two are floated respectively left and right and the third is directly underneath them.

Problem is that after clearing both, Firefox throws the third div a mile-and-a-half below the two floaters. IE displays it just fine, without any excess margin.

Here's the code:

HTML: 
        <div id="cont">
         
         <div id="one"></div>         
         <div id="two"></div>
         <div id="three"></div>
         
        </div>

Code: 
#cont {
	background-color: #fff;
	margin-top: 10px;
	margin-left: 10px;	
	width: 500px;
	min-height: 125px;
}

#one {
	width: 215px;
	height: 106px;
	float: left;
	display: inline;
	margin: 5px 0px 0px 15px;
	border: 1px solid #ffd298;
}


#two {
	width: 215px;
	height: 106px;
	float: right;
	display: inline;
	margin: 5px 15px 0px 0px;
	border: 1px solid #ffd298;
}

#three {
	clear: both;
	margin: 10px auto 0px;
	border: 1px solid #ffd298;
	height: 59px;
	width: 200px;
}

Anyone have an idea as to what's up?
 
Last edited:
L

LouTheDesigner

New Member
I'm patiently waiting for PixelPusher's godly advice regarding CSS. He will most likely get back to you soon (he's a wonderful moderator) -- you came to the right place!

-Lou
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Magictree,

Here's my two cents...

To start I looked at this exact code in FF 3.6 and the third division sits right under the first two. Not sure why you are getting it at the bottom of the page? What FF version do you have? Did you do a hard refresh to make sure the cache is cleared?

That being said lets look a the css...

Word to the wise min-height is not supported in IE6, if that is a not a concern for you then disregard that comment. Nevertheless, there is no need to use min-height on the container div, or any height element fo rthat matter.

Quick lesson, a division will always span the width of the body unless otherwise specified. This is not true for the height. Height will be determined by the static child elements (inner content). Floated items are not static, they do not follow the natural flow of the document (hence the name float). To get a parent element to expand to floated child elements use "overflow:hidden". Like so:

Code: 
#cont {
	background-color: #eee;
	margin: 10px 0 0 10px;
	width:500px;	
	overflow:hidden;
}

In your case, you have a static child element (#three) following the floated items (#one and #two) so the parent will expand to the full dimension of all its children (unless you end with a floated child element). Sounds a bit complicated but its quite a simple process really.

Ok, next you can shorten your css code for the two floated divisions (on the premise this is the exact style you want). One key concept behind CSS is the "cascading" factor. Meaning the browser will take the last style it reads for an element, even of they are the same attribute. For example:

Code: 
#one, #two {
	width: 215px;
	height: 106px;
	float: left;
	margin: 5px 0 10px 15px;
	border: 1px solid #ffd298;
}
#two {
	float: right;
	margin: 5px 15px 10px 0;
}

Apply all styles that both one and two share and then adjust only the ones you need for two.

FYI, there is no need to use display:inline as any floated item will float next to another if the parent dimensions allow, if not, only then will it move the the line/level below.

Last one, you will not able to adjust/position a static element with margins when that edge is next to a floated element. This is because the floated element is removed form the natural doc flow. To create a margin next to a floated element you must add the margin to the floated element not the static one. Hence why I removed the margin-top from "#three" and added it to the bottom of "#one" and "#two".

Code: 
#three {
	clear: both;
	margin: 0 auto;
	border: 1px solid #ffd298;
	height: 59px;
	width: 200px;
}

Whoa that was a long post lol! Let me know if I lost you there
 
Last edited:
You must log in or register to reply here.
Top