How to prevent the floating layout wrapping when firefox zoom is reduced

css firefox zoom css-float word-wrap
Dmitri Zhuchkov picture Dmitri Zhuchkov · Aug 13, 2009 · Viewed 26.2k times · Source

Given the following HTML. It display two columns: #left, #right. Both are fixed width and have 1px borders. Width and borders equal the size of upper container: #wrap.

When I zoom out Firefox 3.5.2 by pressing Ctrl+- columns get wrapped (demo).

How to prevent this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
      div           {float:left}
      #wrap         {width:960px}
      #left, #right {width:478px;border:1px solid}
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>
  </body>
</html>

Answer

ЯegDwight picture ЯegDwight · Aug 13, 2009

Try switching to a different box model as follows:

#left, #right 
{ 
  width:480px;
  border:1px solid;
  box-sizing: border-box;

  /* and for older/other browsers: */
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box
}

Related questions

How can I zoom an HTML element in Firefox and Opera?

How can I zoom an HTML element in Firefox and Opera? The zoom property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and Opera. Is there any method for adding this property to …

Read More
When using CSS Scale in Firefox, element keeps original position

When using scale in Firefox, the scaled element dóes get scaled properly. The problem is, that it's positioned as if it isn't scaled. This works fine in Chrome, and probably also in IE, Safari and Opera. These browsers all …

Read More
Stop Firefox DPI Scaling (when Windows setting is at 125%)

I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in. This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly. However, …

Read More