Revision history [back]

There are different ways to achieve this arrangement, but one possible solution is:

HTML code:

<div class="wrapper">
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="bottom"></div>
</div>

CSS code:

.wrapper {
  text-align: center; /* centers the inline-blocks horizontally */
}
.top {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 10px; /* creates space below this div */
  vertical-align: top; /* aligns this div to the top of the line */
}
.bottom {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: blue;
  margin-left: 5px; /* creates space between the bottom divs */
  vertical-align: bottom; /* aligns these divs to the bottom of the line */
}

This code creates a wrapper div that centers the inner divs horizontally using text-align: center. It also sets the vertical-align property to top for the top div and bottom for the bottom divs, so that they align to the respective edges of the inline line. Additionally, it adds some margin between the top and bottom divs using margin-bottom and margin-left, and sets the width, height, and background color for each div.

Here's a visual representation of the layout:

|---------|   |---------|   |---------|
|   RED   |   |  BLUE   |   |  BLUE   |
| 100x100 |   | 50x50   |   | 50x50   |
| (top)   |   | (bottom)|   | (bottom)|
|         |   | (1)     |   | (2)     |
|---------|   |---------|   |---------|

In this example, the top div is positioned higher than the other two because it has a margin-bottom of 10px that creates space below it, and it is also aligned to the top of the inline line using vertical-align: top. The bottom divs are aligned to the bottom of the inline line using vertical-align: bottom, so they appear below the top div.