title: Splitting website based on browser width
body: <p>I want to create a website which is split into two halves, left and right, and depending on the browser width, the user changes what appears in the two halves. </p>
  
  <p>On the right will be a generative program probably created using processing.js running continuously. 
  On the left will be the main website with images and links to a series of pages.</p>
  
  <p>On a large screen desktop PC the user will get both halves. Importantly the right half needs to run continously whatever happens on the left half. In the old days I would just do this with Frames, keeping the two halves distinct. Now with CSS i'm not so clear how to do this. 
  As the right side stays put throughout then i thought i could use some inline HTML targetted onto the left side - but as all the pages and code and links are on the left - i'm stuck. making the left side an iframe doesn't work because it can't be styled in CSS to shrink to fit the mobile browser width.  </p>
  
  <p>If the width of the browser is below 400pixels then i don't want to send the user the right side at all - the whole website is now just the left hand side (and this needs to shrink down to fit the available width). This would be if you looked at the website on a mobile etc. </p>
  
  <p>i don't want to use JQuery, AJAX etc... or other people's scripts if i can help it. I want all the code to be small and tidy.  </p>
  
  <p>The idea is that on a mobile the site is compact. on a PC you get a bonus of a running program to the right of the page. </p>
  
  <p>Is this possible using just javascript + CSS?</p>