CODEWITHSUNDEEP
htmlcssalignmentpositioning
codekeeper
codekeeper

Reputation: 3

[html5 and css3]How to align three different size divs horizontally and vertically without leaving any space between them

I have three divs red, black and green. I want red div whose height is 45mm and next black div on its right whose height is 55mm and then green div just below the red div and green div height is 50mm.

I am using the code

<div style="height:45mm;width:30mm;border:1mm solid red;float:left;position:relative;">
</div>
<div style="height:55mm;width:20mm;border:1mm solid black;display: inline-block;">
</div>
<div style="height:50mm;width:20mm;border:1mm solid green;">
</div>

But I am getting the following result:

https://i.sstatic.net/wSNpW.jpg

What I desire is:

https://i.sstatic.net/4d5wn.jpg

Thanx

Upvotes: 0

Views: 129

Answers (2)

Ori Drori
Ori Drori

Reputation: 192287

This uses a flexbox with direction of column, wrap, and tight constraints (height and width). I've used order to change the order of the elements, but you can just switch the order in the HTML.

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 35mm;
  height: 105mm;
}

#rect1 {
  height:45mm;
  width:30mm;
  border:1mm solid red;
}

#rect2 {
  order: 1;
  height:55mm;
  width:20mm;
  border:1mm solid black;
}

#rect3 {
  height:50mm;
  width:20mm;
  border:1mm solid green;
}
<div id="container">
  <div id="rect1"></div>
  <div id="rect2"></div>
  <div id="rect3"></div>
</div>

Upvotes: 1

Vince
Vince

Reputation: 4232

My initial reaction was use flexbox! But I can't actually figure out how to do what you want with display: flex.

I can do what you want in this exact situation with position: relative on the third rectangle, but I'm not sure if that's the kind of solution you're looking for:

#rect1 {
  height:45mm;
  width:30mm;
  border:1mm solid red;
  float:left;
  position:relative;
}

#rect2 {
  height:55mm;
  width:20mm;
  border:1mm solid black;
  display: inline-block;
}

#rect3 {
  position: relative;
  top: -11mm;
  height:50mm;
  width:20mm;
  border:1mm solid green;
}
<div id="rect1"></div>
<div id="rect2"></div>
<div id="rect3"></div>

Upvotes: 0

Related Questions