1 reply [Last post]
Tojo
Tojo's picture
Offline
Regular
Last seen: 7 years 9 weeks ago
Timezone: GMT+1
Joined: 2011-10-21
Posts: 44
Points: 76

The three columns are called Menu ,Left column and Right column counting from left.
As it is now when I reduce the screen the columns are lined up in this way.
The Menu columns is at the top and below this we have the Left column and below this Left column we the Right column.
I want them instead to lined up in this way
At the top I want the Left column and below this the Menu column and below this Meny column I want to have the Right column.
I have tried but I can't make it work.
Can somebody tell me what I should change to have this solution.
Here is the html code

<html>
   <head>
      <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
       <title>Responsive Three Column Layout</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
 
       <link rel="stylesheet" media="screen" href="StyleSheet.css">
 
       <!--[if lt IE 9]>
          <script src="js/respond.min.js"></script>
       <![endif]-->
 
   </head>
 
   <body>
      <h1>Responsive Three Column Layout</h1>
 
      <div class="columnsContainer">
         <div class="sideNav">
            <h2>Menu</h2>
            <p>menu items here</p>
         </div>
 
         <div class="leftColumn">
	    <h2>Left Column (fluid)</h2>
 
	    <p>Bacon ipsum dolor sit amet capicola ball tip beef ribs
                leberkas, turkey biltong salami shoulder ribeye. Leberkas 
                chuck cow andouille kevin ribeye pork strip steak pork chop 
                beef ribs beef ball tip corned beef. Leberkas prosciutto 
                brisket, short ribs salami cow sirloin chicken. Bacon pork 
                belly bresaola tenderloin biltong leberkas. Strip steak 
                beef 
                leberkas sirloin, venison turkey hamburger kevin. Drumstick 
                chicken ground round t-bone flank fatback jerky ball tip. 
                Jerky ribeye sirloin t-bone.</p>
 
	    <p>Tongue prosciutto pork ball tip ham hock, meatball sirloin 
               brisket kielbasa biltong doner shoulder bresaola. Chuck beef 
               ribs biltong, kielbasa ground round swine andouille corned 
               beef. Venison hamburger tongue shank. Leberkas doner pork 
               vchop sausage kielbasa pancetta, biltong brisket pastrami 
               tenderloin boudin filet mignon sirloin cow meatloaf. Ham 
               ball
               tip bacon pork belly sirloin.</p>
 
	    <p>Shoulder pig short ribs, salami chicken venison bresaola. 
               Frankfurter meatball pork chop pork loin, turkey strip steak 
               kielbasa pork belly drumstick shank prosciutto. Pork chicken 
               ground round, sirloin tri-tip ham hock pork chop cow 
               meatloaf 
               pork loin bresaola turkey. Prosciutto hamburger pork short 
               ribs flank tri-tip chicken pig bacon meatloaf t-bone shankle 
               doner. Bresaola doner spare ribs biltong jowl boudin, tri-
               tip 
               pork leberkas ham hock filet mignon.</p>
 
	    <p>Leberkas strip steak shoulder meatball, flank biltong shank 
               fatback ball tip swine prosciutto hamburger. Jerky 
               frankfurter drumstick, ham ham hock hamburger kevin kielbasa 
               salami chuck. Flank rump beef cow, beef ribs meatball ball 
               tip jowl bacon pork chop. Biltong tongue pork chop 
               hamburger.
               Frankfurter tri-tip pancetta pork chop venison t-bone 
               andouille beef ribs salami boudin meatball doner spare ribs.
               Brisket pork chop pig kielbasa jerky chuck pork belly beef 
               meatball boudin short loin. Doner jerky andouille ham 
               meatloaf prosciutto kevin pork belly short loin pancetta</p>
 
	    <p>Corned beef spare ribs hamburger pork tenderloin flank pork 
               loin beef ribs sausage brisket chicken venison bacon short 
               loin sirloin. Ribeye tail short ribs andouille kevin chicken 
               shankle meatloaf, corned beef rump sirloin t-bone chuck 
               tongue. Swine venison tongue, sirloin turducken drumstick 
               bresaola strip steak rump. Kevin ham hock meatball tri-tip. 
               Ground round leberkas pig beef salami strip steak meatball 
               beef ribs. Chicken ball tip rump, short loin bresaola pork
               bone jerky jowl
               pork chop tail chuck sausage prosciutto.</p>
	 </div>
 
	 <div class="rightColumn">
	    <h2>Right Column</h2>
 
	    <p>Zombie ipsum reversus ab viral inferno, nam rick grimes 
               malum 
               cerebro. De carne lumbering animata corpora quaeritis. 
               Summus
               brains sit​​, morbo vel maleficia? De apocalypsi gorger omero 
               undead survivor dictum mauris. Hi mindless mortuis soulless 
               creaturas, imo evil stalking monstra adventus resi dentevil 
               vultus comedat cerebella viventium. Qui animated corpse, 
               cricket bat max brucks terribilem incessu zomby. The voodoo 
               sacerdos flesh eater, suscitat mortuos comedere carnem 
               virus.
               Zonbi tattered for solum oculi eorum defunctis go lum 
               cerebro. Nescio brains an Undead zombies. Sicut malus putrid 
               voodoo horror. Nigh tofth eliv ingdead.</p>
	 </div>
      </div>
 
      <footer>
         <p><a href="#">Contact Us</a> | <a href="#">Sitemap</a> | <a 
            href="#">Privacy Policy</a></p>
         <p>©2014 Copyright info here...</p>
      </footer>
 
  </body>
</html>

   *, *:before, *:after 
   {
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
      box-sizing: border-box;
   }
 
   body 
   { 
      margin: 0; 
   }
 
   .columnsContainer, footer 
   { 
      position: relative; margin: .5em; 
   }
 
   .leftColumn, .rightColumn, .sideNav, footer 
   {  
      border: 1px solid  #ccc; 
      padding: 1.25em;  
   }
   .leftColumn, .sideNav 
 
   { 
      margin-bottom: .5em; 
   }
 
 
   @media screen and (min-width: 47.5em ) 
   {
     .leftColumn 
     { 
       margin-right: 19.5em; margin-left: 9.5em;  
     }
 
     .rightColumn 
     { 
       position: absolute; top: 0; right: 0; width: 18.75em; 
      }
 
      .sideNav 
      { 
         float: left; 
      }
    }

//Tony

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Tojo, just posted an

Hi Tojo,
just posted an example in your other topic of a possible solution for this.