Content shrinks in Chrome, Opera but FireFox renders it correctly

233 Views Asked by At

OK, First of all after spending much more time I got the solution but I want to know the reason. Whether it is browser bug or I am making some mistake.

Please find following entire code which render this page incorrectly in Google Chrome, Opera and other few browsers. This code work correctly in FireFox. I can't give jsfiddle link as this problem is not getting reproduced in that environment.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#middlecontainer{width:1000px; height:auto; background-color:#fcf6e2; float:left;}
.matterbox{width:750px; height:auto; float:left;}
.rightsidebox{width:250px; height:auto; float:right;  }
.matter{padding:15px; padding-top:10px;
.heading{ padding:8px; padding-left:5px; font-weight:bold; background-color:#f5d7a7;}
.subheading{font-size:15px; padding-top:5px; color:#663300; font-weight:bold;}
</style>
</head>
<body>
<div id="middlecontainer">
  <img src="http://placehold.it/1000x150"  align="top"/>
  <div class="matterbox">
    <div class="matter">
      <div class="heading">Welcome to product registration</div>
      <p class="style1">Important </p>
    </div>
  </div>
  <div class="rightsidebox">
    <div class="matter">
      <p> This is right hand column </p>
    </div>
    <div style="clear:both"></div>
  </div>
</div>
</body>
</html>

If you are able to reproduce this code (middlecontainer div becomes invisible) in Chrome or in Opera then you can add style="float:left" inline to img tag. This solves this problem but I am trying to find out reason of this problem.

Most importantly FireFox renders this page correctly without any problem.

Please let me know if I need to upload this code on some online web server.

I have uploaded web page on this Link

1

There are 1 best solutions below

3
On

This is because the browser automatically renders the website to the default zoom unless you state otherwise. You should use a meta tag to declare the zoom for the webpage. Check out https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag. If you need more help or this isn't what your looking for please comment back.

Sent from mobile.