0

I am learning responsive design. Till now I know just a few things and am facing a problem.

I made 3 flex boxes, which work but when I am trying to view it on Internet Explorer 9 or less then everything breaks and the boxes are not displaing correctly!

How can I fix this issue? Here is my code on CodePen:

<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
* { margin:0; padding:0; border:0; }
body { color: #535353; background: #e7e7e7; }
#container { background-color:green; width: 80.83%; margin: 0 auto; }
#header { color: #e8e8e8; background: #5e5e5e; padding: 5px 8px; }
.ptext {
    font-size: 1em;
    line-height: 1.20em;
    margin: 1em 1em 1em 1em;
    text-align: justify;
}

.containerbox {
    font-size: 14px;
    display: flex;   
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.containerbox > div {

    vertical-align: top;
    width: 33.33%;
    border: 1px solid grey;
    box-sizing: border-box;
    text-align: center;
    border-radius:5px;
    margin:5px;
    background-color:silver;
}

@media (max-width: 996px) {
    .containerbox {
        display: block;
        width: 100%;
        margin:0px;
    }
}

@media (max-width: 996px) {
    .containerbox > div {
        display: block;
        width: 100%;
        margin:0px;
    }
}

@media (max-width: 996px) {
    #header {
        text-align: center;
    }
}

</style>


</head>
<body>
  <div id="container">

    <div id="header">
      <h1>Test 3 flex boxes</h1>
    </div>

    <div id="main">

      <div class="containerbox">
        <div><p class="ptext">Lorem ipsum dolor sit amet, consectetur      adipiscing elit. Ut urna justo, codetium at malesuada a.</p></div>
        <div><p class="ptext">Lorem ipsum dolor sit amet, consectetur      adipiscing elit. Ut urna justo, codetium at malesuada a.</p></div>
        <div><p class="ptext">Lorem ipsum dolor sit amet, consectetur      adipiscing elit. Ut urna justo, codetium at malesuada a.</p><</div>
      </div>

    </div>

  </body>
</html>

http://codepen.io/anon/pen/RoNzNO

Please give me some solutions how I can fix it in IE9.

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
erapen
  • 1
  • look here http://stackoverflow.com/a/28709421/5930557 – Blueblazer172 Nov 07 '16 at 14:01
  • You simply cannot do it by using `flex`: http://caniuse.com/#feat=flexbox – tmslnz Nov 07 '16 at 14:04
  • hm.. so what's the best way to design 3 responsive boxes in order to work from lets say IE8 and higher since we cant work it with flex ? Can you give me an example of an implementation without flex ? I want three responsive boxes how you do it ? – erapen Nov 07 '16 at 17:50

0 Answers0