How to place iteam side by side

HTML-CSS Conversations
#1

I want to know how to place iteam side by side

1 Like
#2

The most common and traditional way (inline-block)

The most common way to place two divs side by side is by using inline-block css property.

HTML:

<div class='parent'>
  <div class='child'>child 1</div>
  <div class='child'>child 2</div>
</div>

CSS:

.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
}

The output of the above styling is:
Two divs using inline-block

The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

In child we used verticle-align:middle to vertically align the divs taking their center into consideration.

Also we can make space between the two divs by adding margin-right to the first div and/or margin-left to the second div.

There are several ways to place HTML divs side-by-side. The simplest and most efficient way to do this is to make use of a handful of CSS properties (i.e., float, grid, and flex).

2 Likes