Flex sample issues

hi i have copied an example from this site and tried to manipulate it by chaniging order of some elements but its been headache for some hours now, here is the code i edited and below it is the original which works fine.
note i just want the nav to be rendered to the left of the header.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 70%;
           flex: 3 1 70%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: -1;
           order: -1;
   }

 header {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
-webkit-flex: 1 6 80%;
        flex: 1 6 80%;
   -webkit-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 3;
           order: 3;
   }
 footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-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>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

**

original code form: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

**

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-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>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

Off Topic

@jack7171 - when you post code here, you need to format it, or it won’t display correctly.

You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

Thanks a lot TechnoBear, will give a go the next time i post a code.

Can you explain more clearly exactly what you are trying to achieve and what you think is not working?
Do you mean the nav going to the top of the page, beside the header, above the article?

Exactly, i would want to see it move to the left of the header. what i did was to place an order : -1 to it and making the header order:1. i also thought: flex property set to 20% and 80% would have positioned them beside each other. hop this will help you to help me

#main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: -1;
           order: -1;
   }
 header {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
-webkit-flex: 1 6 80%;
        flex: 1 6 80%;
   -webkit-order: 1;
           order: 1;
   }

Ok, the problem is that the header is not within the flex parent, so on the top level of elements you have:-

<header>
<main>
<footer>

Main being the flex parent, so only its children, nav, article and aside are affected by flex. Header is an independent element where flex does not apply.

wow! thanks a lot SamA74, these are little things that causes headache for beginners. am just getting to work on that and

I’m still not sure the exact layout you want. Is it nav and header side by side, or the same vertical nav, next to the article, but protruding up into the header part?
The second one will be difficult.

i want to modify the sample file i looked up at MDN. i wanted the nav move to the left of the header, thats why i gave the order -1. meaning they shoudl be side by side horizontal.

This:-

Or this:-

?
If it’s the first one, you need to alter the html structure so the header is inside of the main div and therefore one of the flex children.

Oh SamA74 thanks a lot for the help. i appreciate it. Now the firs one is what i have been trying to do. i got it right now. thnks alot once again. just going to post a new challenge an face with in a minute. but your first sample is what i was struggling with

SamA74 if i wanted to post a picture like you just did, how do i get round it. i need to send in a picture on a new question i posted to help users understand my issue and help me out

You’ll find instructions here:

(That thread also has other helpful information, and is well worth a read.)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.