Menu icon Foundation
The bane of my existence: I.E. whatever

Maybe this has been asked before. Actually I'm sure it has but I'm just so stressed out at this moment I'm hoping for some personal clarity on a very minute issue involving web design.

I'm developing a very simple site using Foundation and I have this bit of simple CSS in my own stylesheet to center a div fullscreen outside of the standard max grid default I'm using (and I mean the default: 62.5 em). It's used for banner or hero image. It's been working great until today. The day I tested it out in I.E. 11.

It left justifies everything inside.

This is making me want to scream. It's 2014 and this is still an issue. I can't believe it.

Can anyone maybe provide an simple solution to this insanity? I'll buy you a beer or 10.

I'm not a jedi of the web design art and there's probably issues with my code (especially the 2 fullWidth classes) but it's working in every browser. Except I.E.

Thank you for any advice,
Jason

<!-- My simple proto-html snippet: -->

<div class="row fullWidth">
  <div class="large-12 columns fullWidth">
    <div class="panel">
      <img src="http://placehold.it/1200x400&text=[img]">
    </div>
  </div>
</div>

<!-- and my css class: -->

.fullWidth {
   width: 100%;
   margin-left: 0;
   margin-right: 0;
   max-width: initial;
   padding: 0;
   text-align: center;
}
            

         

Internet Explorercenter divhtmlcsshelp me please

Maybe this has been asked before. Actually I'm sure it has but I'm just so stressed out at this moment I'm hoping for some personal clarity on a very minute issue involving web design.

I'm developing a very simple site using Foundation and I have this bit of simple CSS in my own stylesheet to center a div fullscreen outside of the standard max grid default I'm using (and I mean the default: 62.5 em). It's used for banner or hero image. It's been working great until today. The day I tested it out in I.E. 11.

It left justifies everything inside.

This is making me want to scream. It's 2014 and this is still an issue. I can't believe it.

Can anyone maybe provide an simple solution to this insanity? I'll buy you a beer or 10.

I'm not a jedi of the web design art and there's probably issues with my code (especially the 2 fullWidth classes) but it's working in every browser. Except I.E.

Thank you for any advice,
Jason

<!-- My simple proto-html snippet: -->

<div class="row fullWidth">
  <div class="large-12 columns fullWidth">
    <div class="panel">
      <img src="http://placehold.it/1200x400&text=[img]">
    </div>
  </div>
</div>

<!-- and my css class: -->

.fullWidth {
   width: 100%;
   margin-left: 0;
   margin-right: 0;
   max-width: initial;
   padding: 0;
   text-align: center;
}
            

         
WTA Design over 5 years ago

The issue is in the your css

margin-left: 0;
margin-right: 0;

try

margin: 0 auto;

container {
    /* for IE */
    text-align: center;
}
#the-div {
    /* reset text-align */
    text-align: left;
    /* for "good" browsers */
    margin: 0 auto;
}

<div class="container">
    <div id="the-div">centered content</div>
</div>

Jason Mousseau over 5 years ago

That seems to do the trick. Thank you. I owe you a beer now.