Flex Box

3 replies [Last post]

Thu, 2014-12-25 18:45

reisve

Offline

newbie

Luanda,Angola

Last seen: 8 years 22 weeks ago

Luanda,Angola

Timezone: GMT+1

Joined: 2014-12-25

Posts: 3

Points: 4

Hi, I'm new in the fórum

Just discovered the flexbox and found na exemple that is perfect for a site I'm building. The problema is that the layout works fine in Chrome, but is a disaster in IE 10. This is the layout code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
 
  body {
   font: 14px Helvetica;
   color: #ff0000;
   background: #ffffff;
  }
 
  #main {
/*   min-height: 800px; */
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main .maincontent {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccccc;
   min-height: 50px;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 3 1 50%;
           flex: 3 1 50%;
           width: 50%;
   -webkit-order: 2;
           order: 2;
   }
 
  #main .leftside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 1;
           order: 1;
}
 
  #main .rightside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 3;
           order: 3;
 }
 
  .header{
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .topnav {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
 
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
   }
 
   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
 
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }
 
 </style>
  </head>
  <body>
 <div class = "header">Header</div>
 <div class = "topnav">Top Navigation</div>
 <div id = "main">
    <div class = "maincontent">Main Content</div>
    <div class = "leftside">Left Side Content</div>
    <div class = "rightside">Right Side Content</div>
 </div>
 <div class = "footer">Footer</div>
  </body>
</html>

Can someone help me with that problem?

Thank You

Tags:

CSS Layouts

Thu, 2014-12-25 21:03

reisve

Offline

newbie

Luanda,Angola

Last seen: 8 years 22 weeks ago

Luanda,Angola

Timezone: GMT+1

Joined: 2014-12-25

Posts: 3

Points: 4

Code was Wrong, but still not working

The Code was wrong, but still not working. Here it is corrected code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
 
  body {
   font: 14px Helvetica;
   color: #ff0000;
   background: #ffffff;
  }
 
  #main {
/*   min-height: 800px; */
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main .maincontent {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccccc;
   min-height: 50px;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 3 1 50%;
           flex: 3 1 50%;
           width: 50%;
   -webkit-order: 2;
           order: 2;
   }
 
  #main .leftside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 1;
           order: 1;
}
 
  #main .rightside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 3;
           order: 3;
 }
 
  .header{
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .topnav {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
 
   #main {
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
   }
 
   #main .maincontent, .leftside, #main .rightside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
 
   #main .leftside, .rightside, .header, .footer {
    min-height: 50px;
    max-height: 50px;
   }
  }
 
 </style>
  </head>
  <body>
 <div class = "header">Header</div>
 <div class = "topnav">Top Navigation</div>
 <div id = "main">
    <div class = "leftside">Left Side Content</div>
    <div class = "maincontent">Main Content</div>
    <div class = "rightside">Right Side Content</div>
 </div>
 <div class = "footer">Footer</div>
  </body>
</html>

Fri, 2014-12-26 22:10

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Which IE?

IE <v.11 supports an incompatible, draft version of flex-box. V.11 supports the adopted specification.

Does that info help?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sat, 2014-12-27 07:57

reisve

Offline

newbie

Luanda,Angola

Last seen: 8 years 22 weeks ago

Luanda,Angola

Timezone: GMT+1

Joined: 2014-12-25

Posts: 3

Points: 4

Thank You What shall I do to

Thank You

What shall I do to CSS and HTML, to have it working?

Code was Wrong, but still not working

Which IE?

Thank You What shall I do to

User login

Navigation