0

I have two boxes my one box are in the left side and my other box is in the bottom how can I make these two boxes in the same row

I tried to float right

.box2{
  width: 280px;
  height: 250px;  
  padding: 10px;
  background-color: white;

}

my html

<div class="box2">
</div>


<div class="box2">
</div>
Arshiya Khanam
  • 613
  • 6
  • 12
Johnrey
  • 23
  • 1
  • 7
  • `display: inline` should do the trick... but I am not sure that's why I do not write a full answer. As `div`s usally use the full width. (`display: block`) – Mischa Feb 06 '19 at 07:39

2 Answers2

1

.flex-parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: red;
  margin: 20px;
  padding: 20px;
}
<div class="flex-parent">
  <div class="box">Box 1</div>

  <div class="box">Box 2</div>
</div>

You could try some flex-box https://codepen.io/krullmizter/pen/xMXWrv with that you add a parent container around the boxes and flex them with it.

Krullmizter
  • 529
  • 8
  • 28
0

Use display:inline; in style for both the div

.box1 {
  width: 1005px;
  height: 1000px;  
  padding: 50px;
  border: 1px solid red;
  margin-left: 162px;
  background-color: blue;
}

.box2{
  width: 280px;
  height: 250px;  
  padding: 10px;
  background-color: red;

}
.box1, .box2
{
    display:inline;
     text-align:center;
}
<div class="box1">
</div>


<div class="box2">
</div>
ellipsis
  • 12,049
  • 2
  • 17
  • 33
  • damit... I said the same (I made my answer a comment as I wasn't sure if I am correct) and you have beaten me by around 30 seconds :( – Mischa Feb 06 '19 at 07:40