Colocar un div debajo de otro usando css

publicado por: Anonymous

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í

_x000D_

_x000D_

function myFunction() {_x000D_
  var x = document.getElementById("myTopnav");_x000D_
  if (x.className === "topnav") {_x000D_
    x.className += " responsive";_x000D_
  } else {_x000D_
    x.className = "topnav";_x000D_
  }_x000D_
}

_x000D_

/*_x000D_
Theme name: Prueba_x000D_
Theme URI: www.prueba.com_x000D_
Description: Tema de prueba_x000D_
Version: 1_x000D_
Author: Alfredo Mujica_x000D_
Authot URL: Direccion Web del autor_x000D_
*/_x000D_
_x000D_
body {_x000D_
  margin: 0;_x000D_
  margin-left: 12%;_x000D_
  margin-right: 12%;_x000D_
  font-family: Arial, Helvetica, sans-serif;_x000D_
}_x000D_
_x000D_
.topnav {_x000D_
  overflow: hidden;_x000D_
  background-color: #FFFFFF;_x000D_
}_x000D_
_x000D_
.topnav_logo{_x000D_
	margin-top: 20px;_x000D_
  margin-bottom: 20px;_x000D_
	float: left;_x000D_
	width: 30%;_x000D_
}_x000D_
_x000D_
.topnav_logo div{_x000D_
  padding-top: 20px;_x000D_
}_x000D_
_x000D_
.topnav {_x000D_
  	float: right;_x000D_
	margin-top: 20px;_x000D_
  margin-bottom: 20px;_x000D_
	width: 70%;_x000D_
}_x000D_
_x000D_
.topnav a {_x000D_
  float: left;_x000D_
  display: block;_x000D_
  color: #000000;_x000D_
  font-weight: bold;_x000D_
  text-align: center;_x000D_
  padding: 15px 40px 15px 40px;_x000D_
  text-decoration: none;_x000D_
  font-size: 14px;_x000D_
}_x000D_
_x000D_
.topnav a:hover {_x000D_
  background-color: #ddd;_x000D_
  color: black;_x000D_
}_x000D_
_x000D_
.active {_x000D_
  background-color: #C4D9AE;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
.topnav .icon {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
.navbar{_x000D_
  position: relative;_x000D_
  float:none;_x000D_
}_x000D_
_x000D_
.banner {_x000D_
  background: red;_x000D_
  position:relative;_x000D_
}_x000D_
_x000D_
@media screen and (max-width: 600px) {_x000D_
  .topnav a:not(:first-child) {display: none;}_x000D_
  .topnav a.icon {_x000D_
    float: right;_x000D_
    display: block;_x000D_
  }_x000D_
}_x000D_
_x000D_
@media screen and (max-width: 600px) {_x000D_
  .topnav.responsive {position: relative;}_x000D_
  .topnav.responsive .icon {_x000D_
    position: absolute;_x000D_
    right: 0;_x000D_
    top: 0;_x000D_
  }_x000D_
  .topnav.responsive a {_x000D_
    float: none;_x000D_
    display: block;_x000D_
    text-align: left;_x000D_
  }_x000D_
}

_x000D_

<div class="navbar">_x000D_
	<div class="topnav_logo">_x000D_
		<div>_x000D_
			Your Logo_x000D_
		</div>_x000D_
	</div>_x000D_
	<div class="topnav" id="myTopnav">_x000D_
	  <a href="#home" class="active">Home</a>_x000D_
	  <a href="#news">News</a>_x000D_
	  <a href="#contact">Contact</a>_x000D_
	  <a href="#about">About</a>_x000D_
	  <a href="#about">About</a>_x000D_
	  <a href="javascript:void(0);" class="icon" onclick="myFunction()">_x000D_
	    <i class="fa fa-bars"></i>_x000D_
	  </a>_x000D_
	</div>_x000D_
</div>_x000D_
<div class="banner">_x000D_
		hola_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

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.)

_x000D_

_x000D_

function myFunction() {_x000D_
  var x = document.getElementById("myTopnav");_x000D_
  if (x.className === "topnav") {_x000D_
    x.className += " responsive";_x000D_
  } else {_x000D_
    x.className = "topnav";_x000D_
  }_x000D_
}

_x000D_

/*_x000D_
Theme name: Prueba_x000D_
Theme URI: www.prueba.com_x000D_
Description: Tema de prueba_x000D_
Version: 1_x000D_
Author: Alfredo Mujica_x000D_
Authot URL: Direccion Web del autor_x000D_
*/_x000D_
_x000D_
body {_x000D_
  margin: 0;_x000D_
  margin-left: 12%;_x000D_
  margin-right: 12%;_x000D_
  font-family: Arial, Helvetica, sans-serif;_x000D_
}_x000D_
_x000D_
.topnav {_x000D_
  overflow: hidden;_x000D_
  background-color: green;_x000D_
}_x000D_
_x000D_
.topnav_logo{_x000D_
	margin-top: 20px;_x000D_
  margin-bottom: 20px;_x000D_
	float: left;_x000D_
	width: 30%;_x000D_
}_x000D_
_x000D_
.topnav_logo div{_x000D_
  padding-top: 20px;_x000D_
}_x000D_
_x000D_
.topnav {_x000D_
  float: right;_x000D_
	margin-top: 20px;_x000D_
  margin-bottom: 20px;_x000D_
	width: 70%;_x000D_
}_x000D_
_x000D_
.topnav a {_x000D_
  float: left;_x000D_
  display: block;_x000D_
  color: #000000;_x000D_
  font-weight: bold;_x000D_
  text-align: center;_x000D_
  padding: 15px 40px 15px 40px;_x000D_
  text-decoration: none;_x000D_
  font-size: 14px;_x000D_
}_x000D_
_x000D_
.topnav a:hover {_x000D_
  background-color: #ddd;_x000D_
  color: black;_x000D_
}_x000D_
_x000D_
.active {_x000D_
  background-color: #C4D9AE;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
.topnav .icon {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
.navbar{_x000D_
  position: relative;_x000D_
  float:none;_x000D_
  overflow-y: auto;_x000D_
}_x000D_
_x000D_
.banner {_x000D_
  background: red;_x000D_
  position:relative;_x000D_
}_x000D_
_x000D_
@media screen and (max-width: 600px) {_x000D_
  .topnav a:not(:first-child) {display: none;}_x000D_
  .topnav a.icon {_x000D_
    float: right;_x000D_
    display: block;_x000D_
  }_x000D_
}_x000D_
_x000D_
@media screen and (max-width: 600px) {_x000D_
  .topnav.responsive {position: relative;}_x000D_
  .topnav.responsive .icon {_x000D_
    position: absolute;_x000D_
    right: 0;_x000D_
    top: 0;_x000D_
  }_x000D_
  .topnav.responsive a {_x000D_
    float: none;_x000D_
    display: block;_x000D_
    text-align: left;_x000D_
  }_x000D_
}

_x000D_

<div class="navbar">_x000D_
	<div class="topnav_logo">_x000D_
		<div>_x000D_
			Your Logo_x000D_
		</div>_x000D_
	</div>_x000D_
	<div class="topnav" id="myTopnav">_x000D_
	  <a href="#home" class="active">Home</a>_x000D_
	  <a href="#news">News</a>_x000D_
	  <a href="#contact">Contact</a>_x000D_
	  <a href="#about">About</a>_x000D_
	  <a href="#about">About</a>_x000D_
	  <a href="javascript:void(0);" class="icon" onclick="myFunction()">_x000D_
	    <i class="fa fa-bars"></i>_x000D_
	  </a>_x000D_
	</div>_x000D_
</div>_x000D_
_x000D_
<div class="banner">_x000D_
		hola_x000D_
</div>

_x000D_

_x000D_

_x000D_

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

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *