cblakey cblakey - 11 days ago 6
HTML Question

Div not positioning correctly in Firefox 50.0 and IE11

I have a div that is not positioning its self correctly in Firefox and IE11, although it is correctly positioned in Chrome and IE Edge.

I have tried adding {clear: both} and {overflow: hidden} as suggested in other posts, but had no luck.

I want the scroll mouse to be positioned bottom centre of the screen, but it moves to the right.

I have created a fiddle and you can see its positioning is off in Firefox and IE11.

HTML:

<div class="container-fluid vertical-center">
<div class="welcome">
<h1>HELLO, WELCOME</h1>
<br>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<p>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
<br>
</div>

<div class="scroll-downs">
<div class="mousey">
<div class="scroller"></div>
</div>
</div>
</div>


CSS:

.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px
}
.container-fluid::after {
content: "";
display: table;
clear: both
}
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */

min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.welcome {
text-align: center;
}
.scroll-downs {
position: absolute;
bottom: 20px;
margin: auto;
width: 37px;
height: 55px;
}
.mousey {
width: 37px;
padding: 10px 15px;
height: 55px;
border: 2px solid #666;
border-radius: 25px;
opacity: 0.75;
}
.scroller {
width: 3px;
height: 10px;
border-radius: 25%;
background-color: #666;
animation-name: scroll;
animation-duration: 2.2s;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(20px); opacity: 0;}
}

Answer

Here's the problem: you're trying to use margin:auto to center an absolutely-positioned element, which is fine - except you haven't specified any horizontal positioning values for it (left/right).

When using this technique to center an absolutely-positioned element, these values must be defined (usually a value of 0 will suffice), or you'll be at the mercy of the browser's default behaviours. So modify your declaration block to:

.scroll-downs {
    position: absolute;
    bottom: 20px;
    margin: auto;
    width: 37px;
    height: 55px;
    left:0;
    right:0;
}

Here's a JSFiddle to show the code in action. Hope this helps! Let me know if you have any questions.

Comments