CODEWITHSUNDEEP
css
user6028777
user6028777

Reputation:

How to set div between two div

I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo

My Css

#up{  
    width:100%;
    height:30%;
   }
#down{  
    width:100%;
    height:70%;
   }
#square{  
    width:40px;
    height:40px;
   }

Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length

Upvotes: 0

Views: 905

Answers (4)

Anshul
Anshul

Reputation: 128

You need to use position relative to outer div and position relative to inner div

here is the link how can you do it

fiddle

.one,
.two,
.three {
  width: 100%;
  height: 50px;
}

.one {
  background: yellow;
  position: relative;
}

.two {
  background: green;
}

.three {
  background: red;
}

.square {
  position: absolute;
  bottom: -10px;
  right: 30px;
  height: 20px;
  width: 20px;
  background: white;
}
<div class="one">
  <div class="square">

  </div>
</div>
<div class="two">

</div>
<div class="three">

</div>

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4250

You can easily do this with position:absolute to your small box div.

Here is the solution that can help you 

body,
html {
  height: 100%;
  margin:0px;
}

#up {
  width: 100%;
  height: 30%;
  background: red;
}

#down {
  width: 100%;
  height: 70%;
  background: blue;
}

#square {
  width: 40px;
  height: 40px;
  background: green;
  position: absolute;
  top: calc(30% - 20px);
  margin: 0px auto;
  left: 0px;
  right: 0px;
  z-index: 1;
}
<div id="up"></div>

<div id="down"></div>
<div id="square"></div>

Upvotes: 0

Johannes
Johannes

Reputation: 67774

Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).

Upvotes: 0

Rahul Bharadwaj
Rahul Bharadwaj

Reputation: 2784

You can have a <div> square as:

<div id="div1"></div>

in CSS: 

#div1{
 border: 1px red;
 height: /*enter the height */
 width: /* enter the width */
 position: relative;
 left: /*enter the distance */
 right: /*enter the distance */
 top: /*enter the distance */
 bottom: /*enter the distance */
 z-index: 100 /* make sure other div's have z index lesser than this div's */
}

Upvotes: 0

Related Questions