CODEWITHSUNDEEP
htmlcss
YMJA
YMJA

Reputation: 37

Is there a way to get a <div> in the same line of another <div>?

So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?

Image

Upvotes: 1

Views: 71

Answers (2)

Sumit Sharma
Sumit Sharma

Reputation: 1237

.firstDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 150px;
  border-radius: 30%;
  background-color: grey;
}

.secondDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 150px;
  border-radius: 30%;
  background-color: grey;
  margin-left: 10px;
}

.mainDiv {
  
  display:flex;
  flex-direction: row;
}
<div class="mainDiv">
<div class="firstDiv">
First Div
</div>
<div class="secondDiv">
Second Div
</div>
</div>

Upvotes: 3

kennarddh
kennarddh

Reputation: 2665

Use display inline block

.content {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: black;
}
<div class="content">Content</div>
<div class="content">Content</div>

Upvotes: 2

Related Questions