My site's fluid grid not working in IE11 - css

Question

I've created a site via Dreamweaver, and it's supposed to be responsive. When I tested in Chrome and Firefox, it's working fine, but when I tested it in IE11, it's not working as well as expected. For some reason, IE11 is having trouble adjusting the text. The layout is sort of like this:
There's a parent div with two child divs (one for image and another for text). Depending on the row position, the image will either be on the right or left and is set to take 50% of the width.
The max width of the grid container is 1280px and each image, with the exception of the banner is 640 x 800.
I've left the fluid grid CSS mostly default (in Dreamweaver). I've made two versions of the page (index and index2) and both have the same problem.
Here's the div in index
<div class="over480">
<!-- Technology Section -->
<div class="divHomeContent" id="fhTech">
<div class="hcImg1">
<img src="images/thumbs/tech_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
<span class="spnCont">Developing the next generation products for control systems and power supply</span>
</div>
</div>
<!-- End Technology Section -->
<!-- Project Engineering Section -->
<div class="divHomeContent" id="fhPE">
<div class="hcTxt2">
Delivering world-class engineering solutions through power generation expertise.
</div>
<div class="hcImg2">
<img src="images/thumbs/pe_btn.jpg" alt="" border="0"/>
</div>
</div>
<!-- End Project Engineering Section -->
<!-- Marketing & Sales Support Section -->
<div class="divHomeContent" id="fhMkt">
<div class="hcImg1">
<img src="images/thumbs/ms_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
Enhancing Product awareness across the region and help sales win through effective customer engagement.
</div>
</div>
<!-- End Marketing & Sales Support Section -->
<!-- Supply Chain Section -->
<div class="divHomeContent" id="fhSC">
<div class="hcTxt2">
The Control Tower - ensuring delivery of products whenever and wherever customers need them.
</div>
<div class="hcImg2">
<img src="images/thumbs/sc_btn.jpg" alt="" border="0"/>
</div>
</div>
<!-- End Supply Chain Section -->
<!-- Lifecycle Services Section -->
<div class="divHomeContent" id="fhLS">
<div class="hcImg1">
<img src="images/thumbs/ls_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
Best-In-Class technical support and services that solve our customers’ toughest problems.
</div>
</div>
<!-- End Lifecycle Services Section -->
And here are the CSS codes:
/*
/*
* HTML5 ✰ Boilerplate v3.0.2
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; background-color: #e5e5e5; font-family: Arial; color: #595858; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
/*
* 'border-collapse: collapse;' needs to be overridden in designs having tables with rounded corners and drop shadows.
*/
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/* =============================================================================
Extra Styles
========================================================================== */
.gridContainer {
background-color: #fff;
}
footer {
color: #909090;
margin-top: 60px;
}
.divExtras .ex-ico {
/*width: 50px;
height: 50px;*/
margin-left: auto;
margin-right: auto;
}
.divExtras {
width: 100%;
color: #fff;
padding-top: 40px;
text-align: center;
}
.divExtras td {
width: 20%;
text-align: center;
padding: 10px;
}
.divC001 {
/*display: table;*/
width: inherit;
border: 0px solid black;
position: relative;
}
.divC002 {
/*display: table;*/
width: inherit;
border: 0px solid red;
position: relative;
}
.imgHome {
position: relative;
}
#divH002 {
z-index: 0;
}
/*#fhTech .hcImg1 {
position: relative;
top: -30px;
z-index: 1;
}
#fhPE .hcImg2 {
position: relative;
top: -60px;
z-index: 2;
}
#fhMkt .hcImg1 {
position: relative;
top: -90px;
z-index: 3;
}
#fhSC .hcImg2 {
position: relative;
top: -120px;
z-index: 4;
}
#fhLS .hcImg1 {
position: relative;
top: -150px;
z-index: 5;
}*/
.divExtras {
font-size: 0.9em;
}
.divHomeContent {
border: none;
clear:both;
display: flex;
overflow: hidden;
max-width: 1280px;
flex-flow: row;
}
.divHomeContent div.hcImg1 {
float: left;
width: 50%;
border: none;
max-width: 640px;
}
.divHomeContent div.hcTxt1 {
padding-left: 50px;
padding-right: 20px;
border: none;
max-width: 570px;
overflow: hidden;
flex: 1;
height: inherit;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.divHomeContent div.hcImg2 {
width: 50%;
border: none;
overflow: hidden;
max-width: 640px;
}
.divHomeContent div.hcTxt2 {
padding-left: 20px;
padding-right: 50px;
border: none;
float: left;
width: 100%;
max-width: 570px;
flex: 1;
word-wrap: break-word;
height: inherit;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.spnCont {
display: inline-block;
vertical-align: middle;
}
In Firefox and Chrome, the responsive design is working as expected: The texts vertically align, and the word wrap adjusts great, so the two child divs are side-by-side.
However in IE11, the texts remain vertically at the top and the divs whose text part is on the left don't seem to wrap their text and seem to go beyond the max width I set. As a result, the right-had div, which houses the image, goes to the bottom.
Please help :(

Answer 1

I can see that you're using Flexbox displays, which has been known to have issues with IE11 (and Internet Explorer in general)
I would strongly suggest, if you want all browser support - To utilize another grid system such as Bootstrap or alternatively if you wanted something more light weight, you could go for something like Toast Grid
You can check browser compatibility using a website called CanIUse - It's very handy for checking cross-browser compatibility and even provides alternative resources that you can use!

Answer 2

Ok, so now I found out what was happening. For some reason, my IE11 was rendering the page I was working with using IE7 compatibility. I just added this meta () and everything is now working!