Hola, híce éste CSS:
Código:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html SYSTEM "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ツ ≡</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><link rel="icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
*{margin:0;padding:0;}
body,html{
margin:0;
padding:0;
height:100%;
background:#e4fee0;
color:#000006;
font-family:verdana;
font-size:0.90em;
}
.kbcra{padding-top:1em;padding-bottom:1em;background-color:#130e00;background-image:linear-gradient(#130e00 33%,#e4fee0 43%,#262ce6 88%,#e4fee0 99%);color:#ffbf00;font-size:1.30em;border-bottom:3px double #262ce6;box-shadow:0 4px 2px -2px gray;}
#informacion{margin-top:3.5em;min-height:100%;}
#mnu{margin-bottom:3em;margin-top:1em;text-align:center;font-size:1.10em;color:#000000;border-top:2px solid #000;}
#mnu a:active,#mnu a:link,#mnu a:visited{color:#000000;padding:0.4em;display:block;border-bottom:1px solid #000006;font-weight:bold;}
#mnu a:hover{background-image:linear-gradient(to right,#000 1%,#fff 1%,#262ce6 139%);}
a:active,a:link,a:visited{color:#000006;background:inherit;text-decoration:none;border-bottom:1px dotted #000006;}
a:hover{border-bottom:1px solid #000006;}
#pie {
position:fixed;
width:100%;
bottom:0;
color:#fff;
background:#000;
font-size:6.5pt;
text-align:center;
}
.nv{
clear:both;
border:0;
margin:0;
padding:0;
visibility:hidden;
}
nav{background:#d7d8fb;color:#000;border-bottom:1px solid #000;}
nav a:link,a:visited{font-weight:bold;color:#000;background:inherit;padding-left:0.3rem;padding-right:0.3rem;border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;}
nav a:hover{background:#000;color:#f0f0f0;}
nav ul{border-bottom:1px solid #000;}
#navicon{
font-size:3em;
padding-right:0.1em;
position:relative;
margin-left:0.05em;
margin-top:-0.22em;
}
#mostrarmenu,#menu-top{display:none;}
#mostrarmenu:checked~#menu-top{display:block;}
@media(min-width:500px){
#navicon{display:none;}
nav{text-align:center;position:fixed;}
nav li{display:inline;padding-right:0.7rem;}
#menu-top{display:block;}
#mnu{width:210px;border-top:0;border-bottom-right-radius:1em;padding-right:0.01em;background-image:linear-gradient(to left,rgba(255,0,0,0) 36%,#262ce6 99%,#000006 6%);box-shadow:9px 7px 9px 0 #000006;}
.mnuu{border-bottom-right-radius:1em;}
#container{background:orange;height:100%;margin-top:-1.1em;margin-left:3.00em;margin-right:3.00em;box-shadow:0 18px 28px 0 gray;}
#informacion{min-height:100%;background:#aabbcc;padding-bottom:3em;float:right;margin-right:1em;width:calc((100% - 220px) - 30px);}
}
</style><script type="text/javascript" src="js.js"></script></head>
<body><nav><input id="mostrarmenu" type="checkbox" /><label for="mostrarmenu"><p id="navicon" class="fd">☰</p></label><ul id="menu-top"><li><a href="https://www.google.com/">Inicio</a></li><li><a href="https://www.google.com/?time=1572139139">Ingresar</a></li><li><a href="https://www.google.com/?time=1572139139">Registrarme</a></li><li><a href="https://www.google.com/?time=1572139139">Condiciones del servicio</a></li></ul></nav>
<div id="container">
<div id="informacion">
<p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p>
</div>
<div id="mnu"><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/?d=1" class="mnuu">Detalle 01</a>
</div>
</div>
<div id="pie">leyenda</div>
</body></html>
pero el div ANARANJADO (container), se queda cortito ante el DIV "info" (gris/azúl).
Pueden por favor brindarme la corrección que hace falta.
Si le cambian el tamaño, verán que es un CSS responsive sin JavaScript.
Hacer que las tres rayas ( ≡ ) se conviertan en una X solo puede hacerse con Java Script ?
gracias!