Hola ando teniendo un problema con las dos últimas divs, por alguna razón que no entiendo y no encuentro no se muestran correctamente. Creía que podía ser el 'navbar' el causante de esto, pero no parece que sea así. Una manito por favor 
También quiero saber si el script del responsive se puede almacenar y luego llamarlo desde el html. No le den interés a los form que todavía no hice nada de eso. El problema esta en el diseño. Desde ya muchas gracias 
También quiero saber si el script del responsive se puede almacenar y luego llamarlo desde el html. No le den interés a los form que todavía no hice nada de eso. El problema esta en el diseño. Desde ya muchas gracias Código [Seleccionar]
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/uno.min.css">
</head>
<body>
<div class="banner">Publicidad<br><img src="img/banner.jpg"></div>
<div class="navbar" id="myTopnav">
<a href="#home">Inicio</a>
<a href="#news">Noticias</a>
<div class="dropdown">
<button class="dropbtn">Iniciar sesión
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<form method="post" action="/login.phtml">
<input type="hidden" id="templateLoginDest" name="destination" value="%2F">
<table style="width: 350px;" align="center">
<tbody><tr>
<td valign="top" width="100px"><b>Usuario:</b></td>
<td valign="top"><input type="text" name="username" id="templateLoginPopupUsername" size="30"></td>
</tr>
<tr>
<td valign="top"><b>Contraseña:</b></td>
<td valign="top"><input type="password" name="password" size="30"><br><a href="/account/passwordreset.phtml" style="font-size: 8pt;">Recordar contraseña</a><br><br></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Entrar!"></td>
</tr>
</tbody></table>
</form>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
</div>
<script>function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
<div class="div1">a</div>
<div class="div2">b</div>
</body>
</html>Código [Seleccionar]
body {
background-color: lightgray;
}
.banner {
background-color: black;
color: #fff;
margin: auto;
width: 50%;
text-align: center;
font-family: monospace;
width: 700px;
height: 120px;
margin-bottom: 0px;
}
.banner img {
width: 700px;
height: 100px;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: fixed;
background-color: black;
width: 350px;
height: auto;
color: #fff;
float: left;
}
.dropdown-content a {
float: none;
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
overflow: visible;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}