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>
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]
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.
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:
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.