Placing Box In CSS

Question

I have 3 boxes on a page, and I want to place them next to each other. which code should I use? Margin? Padding? Which display? Inline or Block?

.box{
  box-sizing: border-box; 
  width: 350px;
  height: 200px;
  background-color: rgba(158, 235, 158, 0.151);
  border-width: 2px;
  border-style: dashed;
  border-radius: 7px;
  border-color: rgb(13, 54, 31);
}

<div class="box-1"/>
<div class="box-2"/>
<div class="box-3"/>

There are a couple of problems with your snippet which you may like to correct - depending on what you want the effect to be. Your divs appear on top of one another as they are not terminated explicitly. They are interpreted as nested. The .box setting does not get applied as you have no class="box" set. Depending on what you want eventually you might investigate display inline-block or display flex. — A Haworth, Apr 05 '21 at 07:34

score 1 · Answer 1 · answered Apr 05 '21 at 06:47

1

Using flexbox its quite easy. just set the parent element flex direction to row.

<div id="row">
  <div id="box-1" />
  <div id="box-2" />
  <div id="box-3" />
</div>

#row {
  display: flex;
  flex-direction: row;
}

answered Apr 05 '21 at 06:47

Oliver Ilmjärv

321
2
11

score 1 · Answer 2 · answered Apr 05 '21 at 06:54

In the CSS that you have written there is a selector named box while no class box you have used in the HTML divs.

Also starting curly bracket is missing while writing your CSS for selector box.

First correct this syntax and then you can use display:flex; on the parent container of the 3 divs.

Also divs are paired tags, so you must use the closing div also.

.container{
 display:flex;
}
.box{
  box-sizing: border-box; 
  width: 350px;height: 200px;
  background-color:rgba(158, 235, 158, 0.151);
  border-width: 2px;
  border-style: dashed; 
  border-radius: 7px;
  border-color: rgb(13, 54, 31);
}

<div class="container">
  <div class="box-1 box">Box 1</div>
  <div class="box-2 box">Box 2</div>
  <div class="box-3 box">Box 3</div>
</div>

score 0 · Accepted Answer · answered Apr 05 '21 at 07:01

It is possible to use display: flex which has flex-direction: row by default. In addition, it is possible to set width in percents:

.container {
  display: flex;
}

.container div {
    width: 33%;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Placing Box In CSS

3 Answers3