SHERIN AS SHERIN AS - 2 months ago 9
CSS Question

Align 3 div in correct format

I need 3 divs like the following: Div 3 is centered underneath Div 1 and Div 2
enter image description here

I have tried the following code

<div style="float:left;width: 47%;padding-left: 32px; margin-top: -49px;">DIV 1</div>
<div style="float:left;width: 47%;padding-left: 32px; margin-top: -49px;">Div2</div>
<div style="width: 47%;padding-left: 32px; margin-top: -49px;">DIV 3</div>

Answer

You can do this by making your elements inline-block instead of floating them:

.wrapper {
  display: inline-block;
  text-align: center;
  border: 1px solid red
}
.wrapper > div {
  display: inline-block;
  width: 47%;
  /* not sure what this padding or margin was for so I just left them in as they are on your original divs */
  padding-left: 32px;
  margin-top: -49px;
  box-sizing: border-box;
  border: 1px solid red
}
<div class="wrapper">
  <div>DIV 1</div>
  <div>Div 2</div>
  <div>DIV 3</div>
</div>