Page 1 of 1

float:left behavior in FF vs IE ??

Posted: Thu Mar 08, 2007 2:12 am
by JohnNero
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hi people !

In this example Box2 appears below Box1 in FF (and gets no background color ??). Feels like i am missing something obvious but i been ripping my hair for a day now to understand FLOAT. I would expect the boxes to appear like in IE in this case.

Please shine some light on this for me.

Se example here [url]http://www.kallteknik.se/test/test.htm[/url]. In Test2 i have increased the width to 300 and then i works like expected...Uhhh  


[syntax="html"]<div class="Test1" style="float:left; 
	margin:0px; 
	padding:0px; 
	height:50px; 
	width:100px; 
	background:#AAFFDD;">
Box 1</div>

<div class="Test2" style="margin:0px; 
	padding:0px; 
	height:50px; 
	width:100px; 
	background:#AADDFF;">
Box 2</div>
Thanx !
/Roger
Sweden


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Thu Mar 08, 2007 9:03 pm
by Christopher
You need to add a "float:right" to your right div. It is also often a good idea to wrap these two in a bounding div to give you more control.

Posted: Thu Mar 08, 2007 11:21 pm
by nickvd
I don't have IE here, so I don't know what you want it to look like, but if you want them to sit side-by-side, just do what arborint suggested, float left, float right, with a container div with a width set to approximately the width of div one plus div two.

Posted: Fri Mar 09, 2007 12:51 am
by matthijs
Another tip: if you do use a wrapper div around the two boxes and you want an easy way to clear that div without using an extra clearing element, float it as well. So:

Code: Select all

#wrapper {float:left;width:100%;}
#box1 {float:left;width:46%;}
#box2 {float:right;width:46%;}
With floats, in general it's best to float nearly everything. In my experience that's less buggy (in Internet Explorer) then floating half the stuff and not-floating the rest. And if you allow enough breathing room around the floated boxes and take care not to set both widths and margins/paddings/borders on them, they work very well. No hacks needed to get them working cross-browser from IE5 upwards and modern browsers.

Posted: Fri Mar 09, 2007 12:58 am
by nickvd

Code: Select all

* {margin:0;padding:0;float:left;}
:?: ;)

Posted: Fri Mar 09, 2007 2:16 am
by matthijs
nickvd wrote:

Code: Select all

* {margin:0;padding:0;float:left;}
:?: ;)
So what's that, your secret trick? :)