Skip to content

Instantly share code, notes, and snippets.

@RichardBarrell

RichardBarrell/silly_bars.html

Created October 9, 2014 00:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RichardBarrell/8bd96834040e64a38c3a to your computer and use it in GitHub Desktop.
Save RichardBarrell/8bd96834040e64a38c3a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment