Float:left does not work in Firefox/Netscape
HTML, CSS tips and tricks #II
The code might be something like:
There’s nothing wrong, IE is acting Smarter, it actually calculates and considers the width for ‘right’ div to be 70% but Firefox or Netscape takes it to be 100% which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%, and the same thing is happening here in case of Firefox and Netscape.
Well, now do I need to tell the solution? Pretty simple, assign width preferable little less than 70% e.g. 68% and everything will work as you want in Firefox, Netscape as well as IE.
The code might be something like:
<div>and style with properties:
<div id="”left”"> test text left or image</div>
<div id="”right”">test text right</div>
</div>
#left {width:30%; float:left;}everything is perfect and works as expected in Internet Explorer, then what’s wrong with Firefox/Netscape?
#right {float:right;}
There’s nothing wrong, IE is acting Smarter, it actually calculates and considers the width for ‘right’ div to be 70% but Firefox or Netscape takes it to be 100% which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%, and the same thing is happening here in case of Firefox and Netscape.
Well, now do I need to tell the solution? Pretty simple, assign width preferable little less than 70% e.g. 68% and everything will work as you want in Firefox, Netscape as well as IE.
posted by DG | 3:51 AM
3 Comments:
Of course float: left and float: right do work on Firefox (i just dunno with netscape).
With regards to IE, to ensure floating works well, do not break codes into different lines.. as this is what destroys the layout in IE most of the time.
Useful entry, thanks!
Just one comment: "which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%."
What you typically see browsers doing if you don't specify a width on a (non-floated) div is 100% by a MARGIN box model, actually (which is ridiculously convenient!).
Or, in standards talk: The width of the auto-sized box is "100%-(2*padding)-(2*border)-(2*margin)".
Test it if you like - take a div with implicit width and alter the padding and see if it resizes... then do the same with a div you've explicitely told to be 100% wide. :)
I hope that helps!
Hi. I hope I can get some help here. Website on googlepages has worked fine and suddenly the left margin with graphic, links, and some text appears at the bottom of the right hand column on both IE 7 and Firefox 2. The issue is on MY computer, it all looks right on both browsers, as well as on the manage domain web pages. I've cleared history on my browsers and it still looks fine but on other computers it appears to be missing in action.
Any insights on what/why this is happening - or on how I could fix it when i can't even see the problem on my computer?
Thanks
Post a Comment
<< Home