3

Tengo un div que es una especie de contenedor (que tambien tiene estilo) y quiero poner otros dos div, uno a la izquierda con una imagen y otro a la derecha con opciones. Estoy tratando de hacerlo pero honestamente no se porque no sale el segundo div.

Lo que estoy tratando de lograr es esto (perdon por la resolucion): introducir la descripción de la imagen aquí

Mi codigo es el siguiente:

.sub-menu1-container {
	margin: 0 5%;
	background: white;
	height: 337px;
	box-shadow: 1px 1px 15px grey;
	position: relative;
    z-index: -1;
}

.sub-menu1-img {
	padding: 1% 10%;
	position: absolute;
}

.sub-menu1-options {
	background: grey;
	position: absolute; 
	right: 10%;
	height: 337px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="sub-menu1-container">
  <div class="sub-menu1-img">
    <img src="http://www.ikea.com/PIAimages/0324126_PE517034_S5.JPG" style="width: 300px; height: 320px;">
  </div>
  <div class="sub-menu1-options">
    
  </div>
</div>
  
</body>

</html>

Pero por alguna razon no sale el div que deberia tener fondo gris. Pueden ayudarme?

5
  • intentastes agregarle texto a los div para ver como se comportan? el 5 oct. 2017 a las 18:09
  • No @JackNavaRow no lo he hecho, pero no deberia ser necesario o si? el 5 oct. 2017 a las 18:13
  • Acabo de agregarle width al div y aparecio sin texto. Hare un par de pruebas mas y si todo esta bien publicare una autorespuesta. el 5 oct. 2017 a las 18:14
  • te iba a escrtibir esa opcion o agregar width o escrbir el texto en el div, el div lo necesita para dimensionarse el 5 oct. 2017 a las 18:15
  • Si @JackNavaRow gracias! Pues, creo que, si quisieras publicar una respuesta indicando que se puede agregar texto o width para visualizarlo seria un buen aporte. Tambien Depiro ha hecho una buena contribucion el 5 oct. 2017 a las 18:18

3 respuestas 3

2

Tu código es correcto pero el div .sub-menu1-options no tiene contenido por eso no aparece.

.sub-menu1-container {
	margin: 0 5%;
	background: white;
	height: 337px;
	box-shadow: 1px 1px 15px grey;
	position: relative;
    z-index: -1;
}

.sub-menu1-img {
	padding: 1% 10%;
	position: absolute;
}

.sub-menu1-options {
	background: grey;
	position: absolute; 
  right: 10%;
	height: 337px;
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="sub-menu1-container">
  <div class="sub-menu1-img">
    <img src="http://www.ikea.com/PIAimages/0324126_PE517034_S5.JPG" style="width: 300px; height: 320px;">
  </div>
  <div class="sub-menu1-options">

    <ul>
      <li>item menu</li>
      <li>item menu</li>
      <li>item menu</li>
      <li>item menu</li>
      <li>item menu</li>
    </ul>
  </div>
</div>
  
</body>

</html>

2
  • puedes agregar el ejemplo en el sitio para que lo pueda visualizar el 5 oct. 2017 a las 18:13
  • Si creo que seria bueno. Ademas, ya me di cuenta que cuando le agrego un valor a width si aparece mi div, creo que ese era el principal problema. el 5 oct. 2017 a las 18:14
1

No se muestra el div de la derecha ya que no le has asignado una anchura (o le has asignado algún tipo de contenido).

Te propongo ponerle una anchura a ambos div (en este caso les he asignado la mitad del espacio del contenedor a cada uno).

Por otro lado, al ser dos div posicionados como absolute, tu tienes la propiedad right: 10% en el div que se encuentra en la parte derecha, lo que superpondrá el div que se encuentra en la parte derecha sobre el que está a la izquierda. Yo te recomiendo que pongas right: 0, y, en caso de que quisieras que hubiera uno más grande y otro más pequeño, ir jugando con las anchuras de ambos div hasta completar la totalidad del div contenedor. Por ejemplo: 60% y 40%, 70% y 30%, etc...

Si quitaras la propiedad right: 0 del div de la derecha, este se pondría encima del div de la izquierda ya que, al estar posicionado de manera absoluta, no toma en cuenta el resto de elementos y toma como referencia su contenedor padre que esté posicionado, por lo que ambos div se posicionarían tomando como referencia la esquina superior izquierda del contenedor.

Tu ejemplo modificado:

.sub-menu1-container {
  margin: 0 5%;
  background: white;
  height: 337px;
  box-shadow: 1px 1px 15px grey;
  position: relative;
  z-index: -1;
}

.sub-menu1-img {
  width: 100%;
  padding: 1% 10%;
  position: absolute;
}

.sub-menu1-options {
  background: grey;
  position: absolute;
  width: 50%;
  right: 0%;
  height: 337px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="sub-menu1-container">
  <div class="sub-menu1-img">
    <img src="http://www.ikea.com/PIAimages/0324126_PE517034_S5.JPG" style="width: 300px; height: 320px;">
  </div>
  <div class="sub-menu1-options">
    
  </div>
</div>
  
</body>

</html>

0

utiliza el z-index: 1000; como superior y los inferiores les asignas menos de mil; usa para hacer el div visible border-style: solid; haci si no te sale ya estas mas seguro de que estan en capas inferiores.

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.