RichardBarrell · October 9, 2014 00:06
diff --git a/silly_bars.html b/silly_bars.html
 <!doctype html>
 <html><head><meta charset="UTF-8" />
 <title>Odd layout example.</title>
 <style type="text/css">
 #evil-container {
 	position: relative;
 	background: #aaffaa;
 }
 body, #evil-container {
 	width: 100%;
 	margin: 0;
 }
 #middle-bit {
 	background: #ffaaff;
 	min-width: 500px;
 	margin: 0 200px 0 200px;
 }
 #middle-bit p {
 	margin: 0 30px 30px;
 }
 #middle-bit pre {
 	font-size: 6px;
 	margin: 30px 30px 0;
 }
 #left-bit {
 	background: #ffaaaa;
 	width: 200px;
 	margin: 0;
 	position: absolute;
 	top: 0px;
 	left: 0px;
 }
 #right-bit {
 	background: #aaaaff;
 	width: 200px;
 	margin: 0;
 	position: absolute;
 	top: 0px;
 	right: 0px;
 }
 @media (max-width: 899px) {
 	#middle-bit {
 		margin: 0;
 		clear: both;
 	}
 	#left-bit, #right-bit {
 		float: right;
 		width: 50%;
 		position: static;
 	}
 }
 </style>
 </head>
 <body>

 <div id="evil-container">
 	<div id="middle-bit">
 		<p>I am the middle part.</p>
 		<p>I deserve to contain a giant picture.</p>
 		<p>The following is stolen from <a href="http://www.ascii-art.de/ascii/t/tiger.txt">http://www.ascii-art.de/ascii/t/tiger.txt</a>:</p>
 		<pre>
                                 ___..........__
           _,...._           _."'_,.++8n.n8898n.`"._        _....._
         .'       `".     _.'_.'" _.98n.68n. `"88n. `'.   ,"       `.
        /        .   `. ,'. "  -'" __.68`""'""=._`+8.  `.'     .     `.
       .       `   .   `.   ,d86+889" 8"""+898n, j8 9 ,"    .          \
      :     '       .,   ,d"'"   _..d88b..__ `"868' .'  . '            :
      :     .      .    _    ,n8""88":8"888."8.  "               '     :
       \     , '  , . .88" ,8P'     ,d8. _   `"8n  `+.      `.   .     '
        `.  .. .     d89' "  _..n689+^'8n88n.._ `+  . `  .  , '      ,'
          `.  . , '  8'    .d88+"    j:""' `886n.    b`.  ' .' .   ."
           '       , .j            ,d'8.         `  ."8.`.   `.  ':
            .    .' n8    ,_      .f A 6.      ,..    `8b, '.   .'_
          .' _    ,88'   :8"8    6'.d`i.`b.   d8"8     688.  ".    `'
        ," .88  .d868  _         ,9:' `8.`8   "'  ` _  8+""      b   `,
      _.  d8P  d'  .d :88.     .8'`j   ;+. "     n888b 8  .     ,88.   .
     `   :68' ,8   88     `.   '   :   l `     .'   `" jb  .`   688b.   ',
    .'  .688  6P   98  =+""`.      `   '       ,-"`+"'+88b 'b.  8689  `   '
   ;  .'"888 .8;  ."+b. : `" ;               .: "' ; ,n  `8 q8, '88:       \
   .   . 898  8:  :    `.`--"8.              d8`--' '   .d'  ;8  898        '
  ,      689  9:  8._       ,68 .        .  :89    ..n88+'   89  689,' `     .
  :     ,88'  88  `+88n  -   . .           .        " _.     6:  `868     '   '
  , '  .68h.  68      `"    . . .        .  . .             ,8'   8P'      .   .
  .      '88  'q.    _.f       .          .  .    '  .._,. .8"   .889        ,
 .'     `898   _8hnd8p'  ,  . ..           . .    ._   `89,8P    j"'  _   `
  \  `   .88, `q9868' ,9      ..           . .  .   8n .8 d8'   +'   n8. ,  '
  ,'    ,+"88n  `"8 .8'     . ..           . .       `8688P"   9'  ,d868'   .  .
  .      . `86b.    " .       .            ..          68'      _.698689;      :
   . '     ,889_.n8. ,  ` .   .___      ___.     .n"  `86n8b._  `8988'b      .,6
    '       q8689'`68.   . `  `:. `.__,' .:'  ,   +   +88 `"688n  `q8 q8.     88
    , .   '  "     `+8 n    .   `:.    .;'   . '    . ,89           "  `q,    `8
   .   .   ,        .    + c  ,   `:.,:"        , "   d8'               d8.    :
    . '  8n           ` , .         ::    . ' "  .  .68h.             .8'`8`.  6
     ,    8b.__. ,  .n8688b., .    .;:._     .___nn898868n.         n868b "`   8
      `.  `6889868n8898886888688898"' "+89n88898868868889'         688898b    .8
       :    q68   `""+8688898P ` " ' . ` '  ' `+688988P"          d8+8P'  `. .d8
       ,     88b.       `+88.     `   ` '     .889"'           ,.88'        .,88
        :    '988b        "88b.._  ,_      . n8p'           .d8"'      '     689
        '.     "888n._,      `"8"+88888n.8,88:`8 .     _ .n88P'   .  `      ;88'
         :8.     "q888.  .            "+888P"  "+888n,8n8'"      .  .     ,d986
         :.`8:     `88986                          `q8"           ,      :688"
         ;.  '8,      "88b .d                        '                  ,889'
         :..   `6n      '8988                                         b.89p
         :. .    '8.      `88b                                        988'
         :. .      8b       `q8.        '                     . '   .d89      '
         . .        `8:       `86n,.       " . ,        , "        ,98P      ,
         .. .         '6n.       +86b.        .      .         _,.n88'     .
           .            `"8b.      'q98n.        ,     .  _..n868688'          .
          ' . .            `"98.     `8868.       .  _.n688868898p"            d
           . .                '88.      "688.       q89888688868"            ,86
         mh '. .                 88.     `8898        " .889"'              .988
 </pre>
 	</div>

 	<div id="left-bit">
 		I am the left sidebar.
 	</div>

 	<div id="right-bit">
 		I am the right sidebar.
 	</div>
 </div>

 </body>
 </html>
	<!doctype html>
	<html><head><meta charset="UTF-8" />
	<title>Odd layout example.</title>
	<style type="text/css">
	#evil-container {
	position: relative;
	background: #aaffaa;
	}
	body, #evil-container {
	width: 100%;
	margin: 0;
	}
	#middle-bit {
	background: #ffaaff;
	min-width: 500px;
	margin: 0 200px 0 200px;
	}
	#middle-bit p {
	margin: 0 30px 30px;
	}
	#middle-bit pre {
	font-size: 6px;
	margin: 30px 30px 0;
	}
	#left-bit {
	background: #ffaaaa;
	width: 200px;
	margin: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	}
	#right-bit {
	background: #aaaaff;
	width: 200px;
	margin: 0;
	position: absolute;
	top: 0px;
	right: 0px;
	}
	@media (max-width: 899px) {
	#middle-bit {
	margin: 0;
	clear: both;
	}
	#left-bit, #right-bit {
	float: right;
	width: 50%;
	position: static;
	}
	}
	</style>
	</head>
	<body>

	<div id="evil-container">
	<div id="middle-bit">
	<p>I am the middle part.</p>
	<p>I deserve to contain a giant picture.</p>
	<p>The following is stolen from <a href="http://www.ascii-art.de/ascii/t/tiger.txt">http://www.ascii-art.de/ascii/t/tiger.txt</a>:</p>
	<pre>
	___..........__
	_,...._ _."'_,.++8n.n8898n.`"._ _....._
	.' `". _.'_.'" _.98n.68n. `"88n. `'. ," `.
	/ . `. ,'. " -'" __.68`""'""=._`+8. `.' . `.
	. ` . `. ,d86+889" 8"""+898n, j8 9 ," . \
	: ' ., ,d"'" _..d88b..__ `"868' .' . ' :
	: . . _ ,n8""88":8"888."8. " ' :
	\ , ' , . .88" ,8P' ,d8. _ `"8n `+. `. . '
	`. .. . d89' " _..n689+^'8n88n.._ `+ . ` . , ' ,'
	`. . , ' 8' .d88+" j:""' `886n. b`. ' .' . ."
	' , .j ,d'8. ` ."8.`. `. ':
	. .' n8 ,_ .f A 6. ,.. `8b, '. .'_
	.' _ ,88' :8"8 6'.d`i.`b. d8"8 688. ". `'
	," .88 .d868 _ ,9:' `8.`8 "' ` _ 8+"" b `,
	_. d8P d' .d :88. .8'`j ;+. " n888b 8 . ,88. .
	` :68' ,8 88 `. ' : l ` .' `" jb .` 688b. ',
	.' .688 6P 98 =+""`. ` ' ,-"`+"'+88b 'b. 8689 ` '
	; .'"888 .8; ."+b. : `" ; .: "' ; ,n `8 q8, '88: \
	. . 898 8: : `.`--"8. d8`--' ' .d' ;8 898 '
	, 689 9: 8._ ,68 . . :89 ..n88+' 89 689,' ` .
	: ,88' 88 `+88n - . . . " _. 6: `868 ' '
	, ' .68h. 68 `" . . . . . . ,8' 8P' . .
	. '88 'q. _.f . . . ' .._,. .8" .889 ,
	.' `898 _8hnd8p' , . .. . . ._ `89,8P j"' _ `
	\ ` .88, `q9868' ,9 .. . . . 8n .8 d8' +' n8. , '
	,' ,+"88n `"8 .8' . .. . . `8688P" 9' ,d868' . .
	. . `86b. " . . .. 68' _.698689; :
	. ' ,889_.n8. , ` . .___ ___. .n" `86n8b._ `8988'b .,6
	' q8689'`68. . ` `:. `.__,' .:' , + +88 `"688n `q8 q8. 88
	, . ' " `+8 n . `:. .;' . ' . ,89 " `q, `8
	. . , . + c , `:.,:" , " d8' d8. :
	. ' 8n ` , . :: . ' " . .68h. .8'`8`. 6
	, 8b.__. , .n8688b., . .;:._ .___nn898868n. n868b "` 8
	`. `6889868n8898886888688898"' "+89n88898868868889' 688898b .8
	: q68 `""+8688898P ` " ' . ` ' ' `+688988P" d8+8P' `. .d8
	, 88b. `+88. ` ` ' .889"' ,.88' .,88
	: '988b "88b.._ ,_ . n8p' .d8"' ' 689
	'. "888n._, `"8"+88888n.8,88:`8 . _ .n88P' . ` ;88'
	:8. "q888. . "+888P" "+888n,8n8'" . . ,d986
	:.`8: `88986 `q8" , :688"
	;. '8, "88b .d ' ,889'
	:.. `6n '8988 b.89p
	:. . '8. `88b 988'
	:. . 8b `q8. ' . ' .d89 '
	. . `8: `86n,. " . , , " ,98P ,
	.. . '6n. +86b. . . _,.n88' .
	. `"8b. 'q98n. , . _..n868688' .
	' . . `"98. `8868. . _.n688868898p" d
	. . '88. "688. q89888688868" ,86
	mh '. . 88. `8898 " .889"' .988
	</pre>
	</div>

	<div id="left-bit">
	I am the left sidebar.
	</div>

	<div id="right-bit">
	I am the right sidebar.
	</div>
	</div>

	</body>
	</html>