CODEWITHSUNDEEP
cssfirefoxcss-float
DroidOS
DroidOS

Reputation: 8890

Firefox Float Misbehavior

I have run into a float layout problem with a site that I am currently redeveloping - take a look at here. The intended layout is

  1. An empty padded area to the left (leftGap)
  2. A vertical menu bar adjacent to it (menuBar)
  3. The main page body (bodyBox)

Here is the relevant CSS

#leftGap {width: 200px;float: left;min-height: 1em;}
#menuBar {width: 250px;float: left;min-height: 1em;}
#bodyBox {width:**???**px;float:left;clear:right;min-height:1em;
          padding:0.5em;padding-left:8em;padding-right: 8em;}

I use a spot of JavaScript to resize the bodyBox at runtime to make best possible use of available screen width

function resizeBodyBox()
{
 var w = $('body').innerWidth() - $('#leftGap').width() - 
         $('#menuBar').width() - $.scrollBarWidth() - 25;
 //25 - a  "don't be greedy" insurance against unexpected behavior
 $('#bodyBox').css('width',w);
}

This works perfectly well on Chrome, Opera, IE7, 8, 9 & 10 (Yes! even IE). However, in Firefox bodyBox insists on wrapping around and placing itself under menuBar as though there isn't "enough space" to accommodate the width I am assigning it (which is not the case, in any case).

I have played around with bodyBox in Firebug but to no avail. There are a number of threads, here and on other forums, that talk about unusual float behavior in Firefox but nothing I have read appears to apply or help here.

I would much appreciate any help with identifying the underlying cause for this behavior. (I should mention that I use box-sizing:border-box so it is unlikely that the effect is down to margin/padding issues that I have overlooked).

Upvotes: 2

Views: 104

Answers (1)

Jan Drewniak
Jan Drewniak

Reputation: 1384

border-box seems to do the trick: 

#bodyBox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }

Upvotes: 3

Related Questions