Take a look at this jsfiddle link using IE 11, Chrome, and FireFox.
Here is the HTML code I am working with:
<div style="width:120px;background-color:#EE1111;">
<div class="daytext"><b>27</b></div>
<div class="dayitem">
<div class="dayzoneon">M</div>
<div class="dayzoneon">P</div>
<div class="dayzoneoff">S</div>
<div class="dayzoneon">N</div>
</div>
<div class="daytext"><b>28</b></div>
<div class="dayitem">
<div class="nozone"></div>
</div>
<div class="daytext"><b>29</b></div>
<div class="dayitem">
<div class="dayzoneon">M</div>
<div class="dayzoneon">P</div>
<div class="dayzoneoff">S</div>
<div class="dayzoneon">N</div>
</div>
</div>
In Internet Explorer, the layout wraps correctly causing the "29" box to go to the next line compared to other browsers like Chrome and FireFox where it stays on the same line even though it's out of the container.
Here is the CSS for the "29" element:
.daytext{
position: absolute;
font-size: large;
top:10;
left: 10;
width:48px;
background-color: #333333;
border-radius:5px !important;
margin: 2px;
opacity: 0.7;
height:32px;
text-align:center;
z-index: 2;
padding-top:12px;
color: #FFFFFF;
display: inline-block;
}
I have searched extensively online but couldn't find any answers...
Another strange observation is that when I add
overflow:hidden
to the first element, the "29" box should disappear, but it remains visible.
I suspect that IE11 might be setting some CSS properties implicitly or has default values different from Chrome and FireFox.