How to Create Css Boxes in body

[Mehwish]

My Question is that,how to create boxes in CCS3 body like these
I am confused try many times but failed

[TechnoBear]

@Mehwish - can you post the code you have so far, and explain which part of the design you’re having problems with?

[SamA74]

To make boxed appear side by side, you can give the <div>s (boxes) a class which is set to display: inline-block;. By default a div is a block element, so each will display on its own line. If you change to inline-block, they are still blocks, but in a line.

.inlineblk {
   display: inline-block;
   background: orange;
   border-radius: 6px;
   width: 20%;
}

html

<div class="inlineblk">
   <h2>Our Services</h2>
   <img>
   <p>Our Services</p>
</div>
<div class="inlineblk">
   <h2>Our Projects</h2>
   <img>
   <p>Our Projects</p>
</div>
<div class="inlineblk">
   <h2>Our Support</h2>
   <img>
   <p>Support with an O.</p>
</div>

There are other methods to do this, depending on your needs, float, flex-box, display-table/table-cell.

[PaulOB]

Here’s another way that should work back to IE8.

For modern browsers you could use flexbox as mentioned by Sam but the display:table version is pretty robust.