CODEWITHSUNDEEP
htmlcss
Karen Hakobyan
Karen Hakobyan

Reputation: 3

Float 3 divs one on the top of another

I want to make something like this: exa ple

I have written it all, but can't make 3 divs appear one on the top of another.

How can I make it so that the red, blue and yellow colours are on one-another ?

.box{
	width:150px;
	height:150px;
}

.red{
	background:#bf1900;
}
.yellow{
	background:#bfa900;
}
.blue{
	background:#1d00bf;
}
.green{
	width: 100%;
	height: 100px;
	background:#00700f;
	position: absolute;
	bottom: 0;
}
.black{
	background: black;
	position: absolute;
	top: 0;
	right: 0;
	width: 250px;
}
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="box red"></div>
	<div class="box yellow"> </div>
	<div class="box blue"> </div>
	<div class="box green">Always on the bottom with 100% width</div>
	<div class="box black"><font color="white">Always on the right top</font></div>

</body>
</html>

Upvotes: 0

Views: 205

Answers (6)

Lucifer
Lucifer

Reputation: 21

One way of approaching this is by setting the position to absolute and then adjust the positioning for each div.

Try this one below.

.box{
  position:absolute;
    width:150px;
    height:150px;
}

.red{
    background:#bf1900;
  top: 1.5em;
  left: 1.1em;
}
.yellow{
    background:#bfa900;
  top:3em;
  left: 2em;
}
.blue{
    background:#1d00bf;
  top: 5em;
  left: 3em;
}
.green{
    width: 100%;
    height: 100px;
    background:#00700f;
    position: absolute;
    bottom: 0;
  color: white;
}
.black{
    background: black;
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
}

Upvotes: 0

terahertz
terahertz

Reputation: 3511

You can accomplish that by using these properties:

E.g.

position: absolute - by making position absolute, you can then use top and left properties to shift the boxes around.

z-index: 1 - to overlap the individual boxes

top: 10px - to shift the box from the top of it's container

left: 10px - to shift the box from the left of it's container

Example Code:

    .box{
    	width:150px;
    	height:150px;
    }
    
    /* Make the 3 boxes' position absolute*/
    .red, .yellow, .blue{
      position: absolute;
    }
    
    /* Add z-index, top, and left properties to individual boxes */
    /* Use z-index: 9999, i.e. something that's higher than the rest if you want blue box to always be on top of others. */
    .red{
    	background:#bf1900;
      z-index: 1;
      top: 24px;
      left: 16px;
    }
    .yellow{
    	background:#bfa900;
      z-index: 2;
      top: 16px;
      left: 12px;
    }
    .blue{
    	background:#1d00bf;
      z-index: 3;
    }
    .green{
    	width: 100%;
    	height: 100px;
    	background:#00700f;
    	position: absolute;
    	bottom: 0;
    }
    .black{
    	background: black;
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: 250px;
    }
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="box red"></div>
	<div class="box yellow"> </div>
	<div class="box blue"> </div>
	<div class="box green">Always on the bottom with 100% width</div>
	<div class="box black"><font color="white">Always on the right top</font></div>

</body>
</html>

Upvotes: 2

Shail_bee
Shail_bee

Reputation: 509

Just play with postion property and either margin or top/left property. I have used margin just for display purpose.

.box{
	width:150px;
	height:150px;
}
.small-box{
  width:50px;
	height:50px;
  position:absolute;
  margin: 30px 0px 10px 10px;
}

.red {
	background:#bf1900;
  margin-top: 20px;
}
.yellow{
	background:#bfa900;
  margin-left: 35px;
  margin-top: 40px;
}
.blue{
	background:#1d00bf;
  margin-left: 25px;
}
.green{
	width: 100%;
	height: 100px;
	background:#00700f;
	position: absolute;
	bottom: 0;
}
.black{
	background: black;
	position: absolute;
	top: 0;
	right: 0;
	width: 250px;
}
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="small-box red"></div>
	<div class="small-box yellow"> </div>
	<div class="small-box blue"> </div>
	<div class="box green">Always on the bottom with 100% width</div>
	<div class="box black"><font color="white">Always on the right top</font></div>

</body>
</html>

Upvotes: 0

navelencia
navelencia

Reputation: 111

I think that if you want to do like in your linked picture, you should make the red/yellow/blue also in an absolute position, and then specify a z-index property for them, so you can pick the order of the "layers".

Basically I'd write that:

.box{
    width:150px;
    height:150px;
    position: absolute;
}

.red{
    background:#bf1900;
    top: 50px;
    left: 50px;
    z-index: 1;
}
.yellow{
    background:#bfa900;
    top: 150px;
    left: 150px;
    z-index: 2;
}
.blue{
    background:#1d00bf;
    top: 100px;
    left: 100px;
    z-index: 3;
}

Upvotes: 0

Felix A J
Felix A J

Reputation: 6490

.box{
width:150px;
height:150px;
  position: absolute;
}

.red{
background:#bf1900;
  
}
.yellow{
background:#bfa900;
  margin: 40px;
}
.blue{
background:#1d00bf;
  margin: 20px;
  z-index: 1;
}
.green{
width: 100%;
height: 100px;
background:#00700f;
position: absolute;
bottom: 0;
}
.black{
background: black;
position: absolute;
top: 0;
right: 0;
width: 250px;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box red"></div>
<div class="box blue"> </div>
<div class="box yellow"> </div>
<div class="box green">Always on the bottom with 100% width</div>
<div class="box black"><font color="white">Always on the right top</font></div>

</body>
</html>

Upvotes: 0

Ramon de Vries
Ramon de Vries

Reputation: 1342

This is one way to do it, might not be very responsive etc. but from here you can probably do the rest

.box{
	width:150px;
	height:150px;
  position: absolute;
}
.colors{
  position: absolute;
  left: 40px;
  top:40px;
  width: 170px;
  height: 170px;
}
.red{
	background:#bf1900;
  top: 0;
  left: 0;
}
.yellow{
	background:#bfa900;
  top: 20px;
  left: 20px;
}
.blue{
	background:#1d00bf;
  top: 10px;
  left:10px;
}
.green{
	width: 100%;
	height: 100px;
	background:#00700f;
	position: absolute;
	bottom: 0;
}
.black{
	background: black;
	position: absolute;
	top: 0;
	right: 0;
	width: 250px;
}
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="colors">
    <div class="box red"></div>
    <div class="box yellow"> </div>
    <div class="box blue"> </div>
  </div>
	<div class="box green">Always on the bottom with 100% width</div>
	<div class="box black"><font color="white">Always on the right top</font></div>

</body>
</html>

Upvotes: 0

Related Questions