CODEWITHSUNDEEP
htmlcss
Zeus.Programming
Zeus.Programming

Reputation: 1

How to layout 3 divs such that one is beside a div and the other is below?

lets say there are 3 rectangles {1, 2, 3} I want rectangle 1 to be on the left, rectangle 2 to be underneath rectangle 1 and rectangle 3 to be beside rectangle 1.

.rect1{
   width: 20px;
   height: 20px;
   float: left;
}
.rect2{
   width: 20px;
   height: 20px;
}
.rect3{
   width: 40px;
   height: 40px;
   float: left;
}

<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>

I have tried this method but rectangle 3 is floating beside rectangle 2 instead of rectangle 1.

Upvotes: 0

Views: 317

Answers (4)

separ1
separ1

Reputation: 205

You can do it without using float. just give margin left and top for the div you want to align:

 .rect1{
 width: 20px;
 height: 20px;
 background-color:Red;
}
.rect2{
width: 20px;
height: 20px;
background-color:black;
}
.rect3{
 width: 20px;
 height: 20px;
 margin-left: 20px;
 margin-top: -40px;
 background-color:blue;
}

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

You can do this with wrapping .rect1 & .rect2 div in one div with float:left fixed width.

.rect-left{
  float:left;
  width: 20px;
}
.rect1{
   width: 20px;
   height: 20px;
   float: left;
   background:red;
}
.rect2{
   width: 20px;
   height: 20px;
   background:blue;
   float: left;
}
.rect3{
   width: 40px;
   height: 40px;
   float: left;
   background:green;
}
<div class="rect-left">
  <div class="rect1">
  </div>
  <div class="rect2">
  </div>
</div>
<div class="rect3">
</div>

Upvotes: 2

rebagliatte
rebagliatte

Reputation: 2146

You could try wrapping .rect1 and .rect2 together, as in this example: http://codepen.io/rebagliatte/pen/ObVgdX

Upvotes: 0

Adrian Salim
Adrian Salim

Reputation: 53

let's check this my code

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}
.rect1{
   width: 20px;
   height: 20px;
   float: none;
   border:1px solid black;
}
.rect2{
   width: 20px;
   height: 20px;
   border:1px solid white;
   float:left;
}
.rect3{
   width: 40px;
   height: 40px;
   float: left;
   border:1px solid red;
   margin-top: -22px;
}
</style>
</head>
<body>

<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>

</body>
</html>

Upvotes: 2

Related Questions