0

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>
0

2 Answers 2

4

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>

0
0

You can use (flexbox). It is better on small screens.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;

}

.grow{
      flex-grow:1;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<ul class="flex-container">
  <li class="flex-item grow">1</li>
  <li class="flex-item grow">2</li>

</ul>
 <ul class="flex-container">
  <li class="flex-item">3</li>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.