0

Quiero que el div de clase banner este debajo del div con clase navbar. He intentado colocando possition: relative a ambos div pero no funciona, cuando lo hago de esa forma solo me aparece el div de clase banner y ademas se toma todo el espacio del otro div.

introducir la descripción de la imagen aquí

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
/*
Theme name: Prueba
Theme URI: www.prueba.com
Description: Tema de prueba
Version: 1
Author: Alfredo Mujica
Authot URL: Direccion Web del autor
*/

body {
  margin: 0;
  margin-left: 12%;
  margin-right: 12%;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #FFFFFF;
}

.topnav_logo{
	margin-top: 20px;
  margin-bottom: 20px;
	float: left;
	width: 30%;
}

.topnav_logo div{
  padding-top: 20px;
}

.topnav {
  	float: right;
	margin-top: 20px;
  margin-bottom: 20px;
	width: 70%;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  font-weight: bold;
  text-align: center;
  padding: 15px 40px 15px 40px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #C4D9AE;
  color: white;
}

.topnav .icon {
  display: none;
}

.navbar{
  position: relative;
  float:none;
}

.banner {
  background: red;
  position:relative;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<div class="navbar">
	<div class="topnav_logo">
		<div>
			Your Logo
		</div>
	</div>
	<div class="topnav" id="myTopnav">
	  <a href="#home" class="active">Home</a>
	  <a href="#news">News</a>
	  <a href="#contact">Contact</a>
	  <a href="#about">About</a>
	  <a href="#about">About</a>
	  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
	    <i class="fa fa-bars"></i>
	  </a>
	</div>
</div>
<div class="banner">
		hola
</div>

2
  • Quita los float, están alineando los contenedores a lado y lado el 21 mar. 2019 a las 20:18
  • No puedo quitar los floats, esos son tener el div de clase topnav_logo a la izquierda y el div de clase topnav a la derecha, estan estos dos dentro del div navbar
    – alfredjmg
    el 21 mar. 2019 a las 20:30

1 respuesta 1

8

El problema se da porque los elementos flotantes no están definiendo un alto al contenedor principal con clase navbar.

Esto es lo que dice MDN al respecto de los elementos flotantes y el porqué afectan el tamaño de sus contenedores padre:

Las reglas para el posicionamiento y limpiado de flotantes aplican solo a elementos dentro del mismo contexto de formato de bloque. Los flotantes no afectan la disposición de los elementos en otros contexto de formato de bloque, y clear solo limpia flotantes pasados en el mismo contexto de formato de bloque. El colapso del margen también se produce solo entre bloques que pertenecen al mismo contexto de formato de bloque.

Una solución que puedes tomar es utilizar el atributo overflow-y con valor auto. O también podrías usar el atributo clear con valor both (Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.)

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
/*
Theme name: Prueba
Theme URI: www.prueba.com
Description: Tema de prueba
Version: 1
Author: Alfredo Mujica
Authot URL: Direccion Web del autor
*/

body {
  margin: 0;
  margin-left: 12%;
  margin-right: 12%;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: green;
}

.topnav_logo{
	margin-top: 20px;
  margin-bottom: 20px;
	float: left;
	width: 30%;
}

.topnav_logo div{
  padding-top: 20px;
}

.topnav {
  float: right;
	margin-top: 20px;
  margin-bottom: 20px;
	width: 70%;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  font-weight: bold;
  text-align: center;
  padding: 15px 40px 15px 40px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #C4D9AE;
  color: white;
}

.topnav .icon {
  display: none;
}

.navbar{
  position: relative;
  float:none;
  overflow-y: auto;
}

.banner {
  background: red;
  position:relative;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<div class="navbar">
	<div class="topnav_logo">
		<div>
			Your Logo
		</div>
	</div>
	<div class="topnav" id="myTopnav">
	  <a href="#home" class="active">Home</a>
	  <a href="#news">News</a>
	  <a href="#contact">Contact</a>
	  <a href="#about">About</a>
	  <a href="#about">About</a>
	  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
	    <i class="fa fa-bars"></i>
	  </a>
	</div>
</div>

<div class="banner">
		hola
</div>

PD: Añadí el color verde solo para visualizar el ejemplo de forma cómoda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.