Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Margin auto fails IE11

if you check my website with the browser Chrome you can see how the div called .bg-content works fine with this style:

.bg-content {
    max-width: 605px;
    height: 149px;
    position: absolute;
    top: 62px;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

But if you open my website with Internet Explorer 11 the div .bg-content is not centered, he is floating to left.

How can I fix this?

like image 269
Funny Frontend Avatar asked Aug 03 '15 09:08

Funny Frontend


People also ask

Why is my margin auto not working?

margin: auto; , it will not work. This is because by default the block-level elements such as a div, p, list, etc take up the full width of its parent element, and no space is left to adjust the element horizontally. So, the very first thing you need to check is whether you have set the width of the element or not.

What will happen if the margin is set to auto?

The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.


2 Answers

it doesn't work because the max-width;

Try this:

.bg-content {
    width: 605px;
    height: 149px;
    position: absolute;
    top: 62px;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
like image 200
cgee Avatar answered Sep 20 '22 16:09

cgee


You should use

width: 100%;

in your .bg-content element

Example: IE11 max-width & margin auto fix

like image 38
Alexandre Canijo Avatar answered Sep 17 '22 16:09

Alexandre Canijo