I am trying to build a site using elastic layout. I have used Eric Meyer’s CSS reset and also used body {font-size:62.5%} in my stylesheet.
Here is my HTML and CSS
html {bacgroound:url() no-repeat top center fixed;}
body {font-family:Arial, Helvetica, sans-serif;
color:#000;
margin:auto;}
'id'other {background-color:color1;}
'id'footer {background-color:color2;}
<html>
<head>
</head>
<body>
<div id="container">
<div id="gallery">
</div>
<div id="other">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
As you can see, if I set a fixed width for the body, the background for #other and #footer remain fixed. So I tried to get around it by setting the width to 100% and using margin: 0 8em 0 8em to center the gallery and the contents of #other and #footer.
The layout I am trying to achieve is basically a one-column layout containing a gallery of pictures. The whole gallery should be centered in the page. I have used em for defining margin and this causes different results in different browsers. If the gallery is centered in one browser, other browsers show a different result. I have tried Firefox, Chrome, and IE9.
Is there any way to produce identical layouts using em as the unit of measurement? Or should I try a fixed layout and use pxinstead of em?
Keep
emor percentanges. They do work.However, using them for centering is probably part of your issue. Centering should be done with
auto, for example: