Web Page displaying differently in Firefox than the desired design that I am getting in Chrome and IE

Question

What I am trying to do is create a div and then place 3 div's inside of it to create a 3 columned webpage.

Here is my HTML containing the content part only:

#Content_Left {
  height: auto;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  float: left;
}
#Content_Center {
  height: auto;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 500px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
#Content_Right {
  height: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  float: right;
}

<div id="Content">
  <div id="Content_Left">
    <h1>Header Here </h1>
    <p>Text Goes Here!</p>
  </div>

  <div id="Content_Center">
    <h1>Header Here </h1>
    <p>Text Goes Here!</p>
  </div>

  <div id="Content_Right">
    <h1>Header Here </h1>
    <p>Text Goes Here!</p>
  </div>
</div>

Now, the problem is that this piece of code is displaying the way I want it to in Chrome and IE but not in Firefox. How do I get rid of this problem?

"[not] the way I want" is not a very good description of a problem. What exactly is wrong about the way it displays in FF? — Joseph Marikle, Mar 08 '16 at 14:40
You can use reset.css or normalize.css http://meyerweb.com/eric/tools/css/reset/ — Haydar C., Mar 08 '16 at 14:43
It works three columned in all browsers. But I think you reffer to the display in the stacksnippet, that's an iframe too much small and you need `200 + 200 + 500 pixels` wide to fit — Marcos Pérez Gude, Mar 08 '16 at 15:12

score 0 · Answer 1 · edited May 23 '17 at 12:00

Your question is too much general. I have run your code snippet in all my browsers and the result was the same.

There are some differences between pages loaded in each of browsers, because all of them are using different drawing core (FF is using Gecko, Chrome has Webkit ad IE has also its own core)

If general definitions are not working, try to aim CSS on exact browser

For chrome it is:

   @media screen and (-webkit-min-device-pixel-ratio:0) { 
         /*trimm your global definition here for chrome only*/
         /*for example*/

                #Content_Right {padding-left: 30px;}

        }

For FF it is:

  @-moz-document url-prefix() {
     /*trimm your global definition here for chrome only*/
     /*for example*/
      #Content_Right {padding-left: 40px;} 


    }

Theese two I use, and it works good. For IE I have never used specific CSS targeting, but this topic should be good. Apply style ONLY on IE

score 0 · Accepted Answer · edited Feb 17 '17 at 18:20

If you want a div with 3 columns, you can either use flexbox:

.container {
  display: flex;
  width: 500px;
  height: 200px;
  background: whitesmoke;
}

.col {
  flex-grow: 1;
  background: white;
  margin: 20px
}

<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

OR you can use float:left but then you would have to know the width of the divs beforehand.

.container {
  width: 500px;
  height: 200px;
  background: whitesmoke;
}

.col {
  width: 25.0%;
  height: 200px;
  float: left;
  background: white;
  margin: 10px;
}

<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

If I were you, I'd use flexbox if possible. It's perfect for these kind of things.

Web Page displaying differently in Firefox than the desired design that I am getting in Chrome and IE

2 Answers2