Mirsardor Tulaganov Mirsardor Tulaganov - 4 months ago 17
HTML Question

IE/EDGE margin-bottom doen't work

I have problem with my code. I need have whitespace between the last div (friday_div) and the end of my web page.

HTML code:

<body>
<div class="header">
<h1>Schedule 613</h1>
</div>
<div class="wrapper">
<div class="monday">
<h1>Monday</h1>
<div id="monday_div"></div>
</div>
<div class="tuesday">
<h1>Tuesday</h1>
<div id="tuesday_div"></div>
</div>
<div class="wednesday">
<h1>Wednesday</h1>
<div id="wednesday_div"></div>
</div>
<div class="thursday">
<h1>Thursday</h1>
<div id="thursday_div"></div>
</div>
<div class="friday">
<h1>Friday</h1>
<div id="friday_div"></div>
</div>
</div>
</body>


CSS code:

body{
background-color:lightgray;
min-width:850px;}
.header{
position:fixed;
z-index:1;
left:0;
top:0;
min-height:50px;
width:100%;
background-color:white;}
.wrapper{
position:relative;
top:90px;
left:1%;
width:97.5%;}
.monday,.tuesday,.wednesday,.thursday,.friday{
float:left;
text-align:center;
min-height:250px;
width:100%;
background-color:white;}
.tuesday,.wednesday,.thursday,.friday{
margin-top:30px;}
.friday{
margin-bottom:30px;}


The problem appears only when i tested project in Internet Explorer browser and EDGE. I used Chrome to test what I did but in Chrome 'margin-bottom' works normal. The problem may also appear in other browsers, but I can not check it out. I hope that somebody help me.

(My level of English is not good enough to explain the problem in more detail, so I wrote here a lot of lines of code to people who know how to solve problems like my problem)

Answer

Try to add overflow:hidden; to .wrapper

.wrapper{
    position:relative;
    top:90px;
    left:1%;
    width:97.5%;
    overflow:hidden;  // add this
}