How to center 2 div blocks separately in a wrap div?

HTML-CSS
#1

HI,
How can I center 2 div blocks so that when the wrap div gets smaller the 2 div blocks inside come closer together and if there is no more free horizontal space left then the 2 div blocks should then be sorted vertical and centered.
Here is an example code on what i try to do:

<div style="text-align: center;">
  <div style="display: inline-block; padding: 10px; margin: 0px 4%;">
    <p>Content-1 150px Width</p>
  </div>
  <div style="display: inline-block; padding: 10px; margin: 0px 4%;">
    <p>Content-2 250px Width</p>
  </div>
</div>
#2

Hi @Jean80,

Have you tried CSS flex box?

For example, giving the wrap div

display:flex;
flex-wrap:wrap;

Hope this help!

1 Like
#3

Flexbox is definitely the way to go! To expand on mingyco’s answer just a little, you’ll also want to use justify-content: space-around or justify-content: space-between or justify-content: space-evenly so your blocks start off apart. Here’s a codepen example I whipped up that I think does what you’re asking:

1 Like
#4