CODEWITHSUNDEEP
htmlcss
Chris Lallo
Chris Lallo

Reputation: 320

How to make an inline-block container's left and right margins always equal?

I have a grouping of containers within another container. For clarification, here's the HTML:

<div class = "box-grouping">
    <div class = "box-section grey">
        <h2>What We Do</h2>
    </div>
    <div class = "box-section grey">
        <h2>Where We Are</h2>
    </div>
</div>

At the preferred resolution, the two boxes would be side by side, with the first box's left margin being equal to the second box's right margin, plus some space in between each. When I design in half my resolution, it looks like this. That's fine, except when I raise the resolution to full size, it looks like this. As you can see, the left and right margins are not equal.

I've tried setting the left and right margins to auto, but that didn't work. Here's the CSS I'm using:

.box-section {
    display: inline-block;
    width: 40%;
    height: 300px;
    margin-left: 60px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

I'd like the page to look like the half resolution screenshot, in any resolution. Additionally, the containers always appear too big in full resolution, but when I try to scale them down, they get too small for smaller resolutions. Any help would be appreciated!

Upvotes: 0

Views: 1330

Answers (5)

Nick
Nick

Reputation: 1422

You could set text-align: center to your .box-grouping class to center the boxes. Then, in your .box-section class, change your margin-left: 60px to margin: 0 30px to apply an even margin to both of the .box-section divs.

With the way your code is currently, you will need to add a media query to shrink the boxes to prevent wrapping for smaller devices.

.box-grouping {
  text-align: center;
}

.box-section {
  display: inline-block;
  width: 40%;
  height: 300px;
  margin: 0 30px;
  padding-top: 20px;
  border-radius: 10px;
  border: 2px solid black;
  text-align: center;
}
<div class="box-grouping">
  <div class="box-section grey">
    <h2>What We Do</h2>
  </div>
  <div class="box-section grey">
    <h2>Where We Are</h2>
  </div>
</div>

Upvotes: 2

Adam James
Adam James

Reputation: 172

You could make the parent div display flex like such.

.box-grouping {
    display: flex;
    justify-content: space-around;
}
.box-section {
    flex: 0 1 40%; /* this means -> flex:[grow] [shrink] [width]; */
    display: inline-block;
    height: 300px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

Upvotes: 2

Abdelkarim EL AMEL
Abdelkarim EL AMEL

Reputation: 1533

You can do something like this :

HTML

<div class = "box-grouping">
    <div class = "box-section grey float-left">
        <h2>What We Do</h2>
    </div>
    <div class = "box-section grey float-right">
        <h2>Where We Are</h2>
    </div>
</div>

CSS

.box-section {
    display: inline-block;
    width: 49%;
    height: 300px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.box-grouping {
  width: 90%;
  margin: 0 auto;
}

Working codepen

Upvotes: 1

Danielr
Danielr

Reputation: 90

<html>
<div class = "box-grouping">
    <div class = "box-section grey">
        <h2>What We Do</h2>
    </div>
    <div class = "box-section grey">
        <h2>Where We Are</h2>
    </div>
</div>
</html>


<style>
.box-section {
    display: inline-block;
    width: 40%;
    height: 300px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

.box-grouping {
    align-content: center;
    text-align: center;
}
</style>

Upvotes: 0

01nick
01nick

Reputation: 1

*Change the second box class name to a different name

*And float the first box to the left. And float the second box to the right.

  • I usually give my container a width off 100%.

Now for the first box give it the margin you want like margin-left 10px.

Now for the second box give it the same margin. Margin-right 10px.

Now for the spacing in between the two boxes. if you want it to be 6px. Give each box 3px margin.

Upvotes: -1

Related Questions