CODEWITHSUNDEEP
css
Mulan
Mulan

Reputation: 135197

How to make floated columns stretch to fill container vertically?

I need to support >= IE9

Click Run code snippet... to see my two columns

main {
  background-color: limegreen;
}

.row {
  overflow: hidden;
  border: 1px solid red;
  margin-bottom: 15px;
}

section {
  float: left;
  margin: 0 2%;
  width: 46%;
  background-color: palegreen;
}
<main>
  <div class="row">
    <section>
      <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
      <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </section>
    <section>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </section>
  </div>
  <div class="row">
    <section>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </section>
    <section>
      <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
      <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </section>
  </div>
<main>

I would like the each <section> to have a matching vertical height. I'm not sure how to do this using CSS.

Upvotes: 2

Views: 60

Answers (2)

Stickers
Stickers

Reputation: 78676

You can stick with float if you want, by using CSS pseudo elements + position tricks for the equal height background color, see the following snippet and comments inline.

jsfiddle

main {
    background-color: limegreen;
}
.row {
    overflow: hidden;
    border: 1px solid red;
    margin-bottom: 15px;
    position: relative;
}
section {
    float: left;
    margin: 0 2%;
    width: 46%;
    background-color: palegreen;
    position: relative;
    z-index: 1; /* top of the pseudo elements */
}
.row:before, .row:after {
    content: "";
    position: absolute;
    top: 0;
    background: palegreen;
    width: 46%; /* same as section width */
    height: 100%;
}
.row:before {
    left: 2%; /* left margin */
}
.row:after {
    left: 52%; /* 2% + 46% + 2% + 2% */
}
<main>
    <div class="row">
        <section>
            <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
            <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </section>
        <section>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
            <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        </section>
    </div>
    <div class="row">
        <section>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
            <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        </section>
        <section>
            <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
            <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </section>
    </div>
</main>

Another approach would be CSS table + table-row + table-cell, like others already suggested in the comments above. I'm adding it here, plus the extra border-collapse + border-spacing features, for drawing the gaps. When comes to responsiveness or mobile style, you can simple reset the relevant display:table* properties back to display:block or so.

jsfiddle

main {
    background-color: limegreen;
    display: table;
    border-collapse: separate;
    table-layout: fixed;
    border-spacing: 20px;
    width: 100%;
}
.row {
    display: table-row;
}
section {
    display: table-cell;
    vertical-align: top;
    background: palegreen;
}
<main>
    <div class="row">
        <section>
            <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
            <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </section>
        <section>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
            <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        </section>
    </div>
    <div class="row">
        <section>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
            <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        </section>
        <section>
            <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
            <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </section>
    </div>
</main>

The outputs between the two solutions are slightly different, but mostly adjustable. One more thing on HTML syntax - the last <main> should be the closing </main>.

EDIT

Added table-layout:fixed for easy equal width of the columns, no matter how many of them.

Upvotes: 2

nolawi
nolawi

Reputation: 4649

just add display: flex; to container

main {
  background-color: limegreen;
}

.row {
  overflow: hidden;
  border: 1px solid red;
  margin-bottom: 15px;
   display: flex;
}

section {
  margin: 0 2%;
  width: 46%;
  background-color: palegreen;
 

}
<main>
  <div class="row">
    <section>
      <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
      <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </section>
    <section>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </section>
  </div>
  <div class="row">
    <section>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </section>
    <section>
      <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
      <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </section>
  </div>
<main>

If you want IE 9 support you can use Match Height JS

Upvotes: 1

Related Questions