float:left behavior in FF vs IE ??

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
JohnNero
Forum Newbie
Posts: 1
Joined: Wed Mar 07, 2007 6:25 pm

float:left behavior in FF vs IE ??

Post 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]
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post 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.
(#10850)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Code: Select all

* {margin:0;padding:0;float:left;}
:?: ;)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

nickvd wrote:

Code: Select all

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