How do I make these three aligning divs responsive?

Question

On my website home page (https://abbaproperty.000webhostapp.com/) I have three divs inline that look like this:

But when viewed on a slightly smaller scree (not mobile), it looks like this:

They're no longer the same height. Although I have added some responsive CSS so it does look like this on a smaller mobile device.

So my question here is that there is a sweet spot where these divs are not displayed very well responsively and I can't think of even the logical CSS to get around this.

HTML:

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

Possible duplicate of [How do I keep two divs that are side by side the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) — Tyler Roper, Jun 08 '17 at 13:39
You can either try to use flexbox: https://css-tricks.com/fluid-width-equal-height-columns/ Or if you can't use flexbox, set a max-height on the columns and update with media queries — Maneesh, Jun 08 '17 at 13:42

score 2 · Answer 1 · answered Jun 08 '17 at 13:42

2

Just add display: flex to .container (without wrap)

answered Jun 08 '17 at 13:42

Johannes

64,305
18
73
130

score 1 · Answer 2 · answered Jun 08 '17 at 13:42

Defined .container as flexbox and added additional styling properties as defined in CSS.

.container {
display: flex;
justify-content: space-around;
align-items: stretch;
}

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

Amy · Answer 3 · 2017-06-08T13:41:10.860

0

You would need to use flexbox for this!

On your container, add another class called flexbox and add the following:

.flexbox {
    display: flex;
}

Heres a fiddle!

https://jsfiddle.net/d6xfu1yz/

edited Jun 08 '17 at 13:41

answered Jun 08 '17 at 13:39

Amy

1,088
2
11
24

No need to add another class for that – VilleKoo Jun 08 '17 at 13:41
1

You don't ideally want to add it onto your container otherwise it could interfere with other things on your website. – Amy Jun 08 '17 at 13:41

WizardCoder · Answer 4 · 2017-06-08T13:46:16.050

You can do it with display:table and display:table-cell. Only use flex when you can't do it any other way.

* {
  box-sizing: border-box;
}
.table {
  display: block;
  table-layout:fixed;
}
.table-cell {
  display: block;
  width:100%;
}
@media screen and (min-width: 640px) {
  .table {
    display: table;
    table-layout:fixed;
  }
  .table-cell {
    display: table-cell;
    width:33.333%;
  }
}

<div class="container table" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
      </div>  
      <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
      A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:15px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
      </div>
      <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
    Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
      </div>
      <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
      We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

If you don't need to support IE9 and below, use `flexbox` otherwise resort to `display: table;` and the like. — hungerstar, Jun 08 '17 at 13:46
@WizardCoder Flexboxes are much better than table, it shouldn't be considered as last option I guess. — Abhishek Pandey, Jun 08 '17 at 13:46
Also flex adds a slight hit to load times, because the browser has to do more calculations. — WizardCoder, Jun 08 '17 at 13:47
@AbhishekPandey I agree in some cases flex is a lot better. This is a good article explaining when it is good to use and when it isn't. http://brolik.com/blog/when-to-use-flexbox/ Quote: "Ask yourself if flexbox really solves an alignment, scale, or ordering issue that can’t be solved in a simpler way with basic CSS." — WizardCoder, Jun 08 '17 at 13:53
@WizardCoder that's for legacy `flexbox`, it's [**faster now**](https://developers.google.com/web/updates/2013/10/Flexbox-layout-isn-t-slow) and faster than `display: table-cell;`. — hungerstar, Jun 08 '17 at 13:54
@hungerstar Thanks for the article. I wasn't aware it had got so fast now. — WizardCoder, Jun 08 '17 at 14:02

Chukwu Remijius · Answer 5 · 2017-06-08T13:55:13.910

Put

<div class='row'>

after the container class. It makes the div layer responsive Also put class="img-responsive" on the image tag to make it responsive too

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">
<div class="row">
    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>
</row>
</div>

score 0 · Answer 6 · answered Jun 08 '17 at 13:59

You should use flexbox and media queries

CSS:

.container > div {
    display: block;
}

@media (min-width: 640px) {
    .container {
        display: flex;
    }
    .container > div {
        flex: 1 1 auto;
    }
}

With flexbox all of the container children will be equal height.

CSS tricks tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How do I make these three aligning divs responsive?

6 Answers6