Margin bottom doesn't want to work in Opera and Safari

StackOverflow https://stackoverflow.com/questions/22159736

Question

i'm new in web design ,i have been doing this code html/css which is about margins in css it really looks easy but the margin-bottom doesnt work in all the browsers. I tested it in Chrome,Internet explorer 11,Firefox and it works but it doesnt work in Opera and Safari. i don't know if i make a mistake because i'm noob or is because of the browser.

This is my code HTML:

<!DOCTYPE html>
<html>
<head>
   <title>CALCULADORA DE CREDITOS - CECyT No. 1 "GONZALO VAZQUEZ VELA" DEL IPN</title>
   <link rel="stylesheet" media="screen" href="prueba.css">
</head>

<body>
   <div id="wrapper">
      Hellow ,i'm a DIV!
   </div>
</body>
</html>

And this is my CSS 'prueba.css':

*{margin:0;
padding:0;}


html,body{height:100%;}


body{margin:4%;}

#wrapper{
margin:0 auto 0 auto;
background-color:gray;
width:60%;
height:100%;
}
Was it helpful?

Solution

remove these parts:

html,body{height:100%;}
body{margin:4%;}

when making elements specific sizes, only use percentages when you're using "position: fixed" on the selected element.

set the margin in the element itself instead, also setting the element in percentages only works when you have a "position: fixed" on your element.

JSFiddle Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top