How to super put div with css?

Question

How to super put div with css?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

3

I have a div that is a kind of container (which also has style) and I want to put another two div, one on the left with an image and the other on the right with options. I'm trying to do it but honestly I do not know why the second div does not come out.

What I am trying to achieve is this (sorry for the resolution):

My code is as follows:

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

But for some reason the div that should have a gray background does not come out. Can you help me?

css

asked by Kenny Barrera 05.10.2017 в 19:56

source

3 answers

1

The div on the right is not shown because you have not assigned a width (or you have assigned some type of content).

I propose to give you a width of both div (in this case I have assigned half of the container space to each one).

On the other hand, being two div positioned as absolute , you have the property right: 10% in the div that is on the right side, which will overlap the div that is in the right part on the one on the left. I recommend that you put right: 0 , and, in case you would like there to be one bigger and one smaller, go playing with the widths of both div until you complete the entire div container. For example: 60% and 40%, 70% and 30%, etc ...

If you remove the property right: 0 from the div of the right, this would be over the div of the left since, being positioned absolutely, does not take into account the rest of the elements and takes as reference your parent container that is positioned, so both div would be positioned taking as reference the upper left corner of the container.

Your modified example:

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

answered by 06.10.2017 в 19:37

0

use the z-index: 1000; as higher and lower ones you assign less than a thousand; use to make the div visible border-style: solid; if you do not leave, you are more sure that they are in lower layers.

answered by 05.10.2017 в 22:25

How to convert json to object in c #? How to know if a break has been executed

score 2 · Accepted Answer

Your code is correct but the div .sub-menu1-options has no content so it does not appear.

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