create a Three Equal Columns in height

Question

Here is a simple three columns that look perfect:

* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<h2>Three Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..Tutorial to learn more about website layouts Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

The problem is when I want to add an image for each column distortion occurs:

* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<h2>Three Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
  <img src="https://img.icons8.com/pastel-glyph/2x/person-male.png">
    <h2>Column 1</h2>
    <p>Some text..Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#bbb;">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9ZSW2Y6SmhAL8R0yD_9rZjTGvlT79DWkBBULhSg5vVoREb9r5_g&s">
    <h2>Column 2</h2>
    <p>Some text..Tutorial to learn more about website layouts Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#ccc;">
  <img src="https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

As you can see how each one of texts get distorted because of the different size of the image used above each column.

I want to resize the icons with CSS so that each text perfectly sits inside a horizontal line just like the first code .....

consider using [CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp) or [CSS GRID](https://www.w3schools.com/css/css_grid.asp) for reliable and easy to manage results. It is easy and fast to learn and will help you in the future for any website layouts. Also it can be modified to become mobile friendly. — era-net, Jun 04 '20 at 12:02
that is done , check below answer, if need something else, feel free to dicuss — Atul Rajput, Jun 04 '20 at 12:15
@foxer, I have added 2 snippets below, please check the 2nd one, — Atul Rajput, Jun 04 '20 at 12:18
There are hundreds of questions about three equal-width columns on this site. Have you looked at any of those? — Heretic Monkey, Jun 04 '20 at 12:19
all three columns have 344.81px equal height, I am not able to understand what you exactly want? — Atul Rajput, Jun 04 '20 at 12:21
Does this answer your question? [3 column layout HTML/CSS](https://stackoverflow.com/questions/20566660/3-column-layout-html-css) — Heretic Monkey, Jun 04 '20 at 12:23

Atul Rajput · Answer 1 · 2020-06-04T12:20:17.397

Just add max-width: 100%; to Images, and it's done Check Example below for equal height columns, you can achieve that with Flex

* {
  box-sizing: border-box;
}
img {max-width: 100%;max-height: 170px;
    margin: 0 auto;
    display: block;}
/* Create three equal columns that floats next to each other */
.wrapper {display: flex;}
.column {
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<h2>Three Equal Columns</h2>

<div class="row wrapper">
  <div class="column" style="background-color:#aaa;">
  <img src="https://img.icons8.com/pastel-glyph/2x/person-male.png">
    <h2>Column 1</h2>
    <p>Some text..Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#bbb;">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9ZSW2Y6SmhAL8R0yD_9rZjTGvlT79DWkBBULhSg5vVoREb9r5_g&s">
    <h2>Column 2</h2>
    <p>Some text..Tutorial to learn more about website layouts Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#ccc;">
  <img src="https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

I swear that I didn't downvote your answer....! but your solution is not correct look at Column 2 it's a bit lower than others ... — foxer, Jun 04 '20 at 12:01
You have mentioned in your question in CSS code that you have applied the height on the column for demo purpose my Friend, this the result of that height — Atul Rajput, Jun 04 '20 at 12:02
I have updated one more snippet for a fix of 2nd column, but that was your intentional thing as you mentioned as well, Please check — Atul Rajput, Jun 04 '20 at 12:05
@RupinderpalThind, yeah that Can be done, and I have added this to code as well, But I don't think this is the need of foxer — Atul Rajput, Jun 04 '20 at 12:17

era-net · Answer 2 · 2020-06-04T15:13:34.923

I managed, to get the images into columns but obviusly the height is not the same, since the images do not have the same sizes. If you'd like to make it perfect, you should use images with identical sizes (e.g. with Figma), then your layout should look good.

For now, try this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.row {
  position: relative;
  display: flex;
}

.row img {
  width: 20%;
  left: 0;
}
</style>
</head>
<body>

<h2>Three Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
  <img src="https://img.icons8.com/pastel-glyph/2x/person-male.png">
    <h2>Column 1</h2>
    <p>Some text..Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#bbb;">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9ZSW2Y6SmhAL8R0yD_9rZjTGvlT79DWkBBULhSg5vVoREb9r5_g&s">
    <h2>Column 2</h2>
    <p>Some text..Tutorial to learn more about website layouts Tutorial to learn more about website layouts</p>
  </div>
  <div class="column" style="background-color:#ccc;">
  <img src="https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

I hope it helps. - greetings from Switzerland!

You do not need to add flex-direction: row; as its the default direction of flexbox — Atul Rajput, Jun 04 '20 at 12:27

Rene van der Lende · Answer 3 · 2020-06-06T16:00:37.883

Although I am much in favour of using 'Flexbox Layout', my code will show you how to use the good ol' CSS column mechanism to get the result you want without hassle and FBL overhead.

I also have made your initial layout 'responsive' by introducing .row {...column-width...} and using a bit of math (linear equation y=mx+b, MathIsFun: Equation of a Straight Line) in a CSS calc(). If you down't want the 'responsive' behaviour, simply disable or remove .row {...column-width...} from the final code.

For comparison (CSS custom properties vs. classes) I added a second row which additionally uses a little spacing between the columns.

The code is divided into two sections

[MANDATORY], minimally required CSS to make it work
[OPTIONAL], eye-candy which can be safely removed

All further explanation is inside the code so you can read as you go....

tiny update: check w3schools: CSS Selector Reference for the use of CSS selectors in the code.

Snippet

/*****************************************/
/* [MANDATORY] generic 'newspaper' style */
/*****************************************/
/*
    I am using this CSS for some 'newspaper' style with varying number of columns.
    With a CSS 'custom property', instead of classes, using different number of columns
    become easy (a personal choice, use classes if you prefer those).

    Added classes to show difference, use either/or.
*/
.row, [newspaper] {
    display: block !important;  /* css 'columns' won't work with flexbox */
    column-fill: balance;       /* default but important. Check difference with 'auto'! */
    column-gap: 0;              /* default is 16px, see [newspaper*=".gaps"] below */
}
.row *, [newspaper] * {
    break-inside: avoid;        /* keeps related content in the same column, disable to see effect */
}
.row.cols-3,
[newspaper*="3"] {
/*
    Using 'column-count' and 'column-width'

    1) WITHOUT 'column-width'
       - the number of columns will always be 'column-count', regardless of column content.

    2) WITH 'column-width'
       - no-of-columns = Min('column-count', parent-width / 'column-width')
       - the actual column width will become  parent-width / no-of-columns
         (meaning that the columns will grow to equal width to fill parent-width)

    NOTE: Using a percentage (% or VW) for 'column-width' is useless as 'column-count' will
          override any percentage, but with a fixed unit (e.g. px or some calc()) 'column-width'
          will be used as a 'min-width' (or breakpoint).
*/
    column-count: 3;
    column-width: calc(10vw + 288px);
    /*
        Using linear equation y=mx+b with point1(320,320) point2(1920,480) => y=0.1x + 288
        MathIsFun: Equation of a Straight Line (https://www.mathsisfun.com/equation_of_line.html)

        Given two sizes (a min and a max) this equation calculates all values inbetween.  

        Net result:
        - at viewport width=320px we want a column-width=320px
          (yielding 1 column at vp <= 960px)

        - at viewport width=1920px we want a column-width=480px
          (yielding 2 columns at vp >= 960px and 3 columns at vp >= 1440px)

        Check various devices with your browsers' Developer Tools
    */

/*    column-width: 100%; /* TRY THIS: at any viewport size you will still get 3 columns */

}
/* add your own for different situations, optionally with alternative 'column-width' */
.row.cols-1, [newspaper*="1"] { column-count: 1 }
.row.cols-2, [newspaper*="2"] { column-count: 2 }
.row.cols-4, [newspaper*="4"] { column-count: 4 }
/* etc.... */

.column {
    /* DEMO: same as 'column-width' multiplied by some-ratio (think: 'cards') */
    height: calc((10vw + 288px) * 1.2);
}
.column>img {
    /*
        Because your images are different in size we need to make the heights equal
        and let CSS default 'width: auto' determine the final width. 
    */
    height: 10rem;  /* some required height suited for the column, any 'height <= column-width' will do */
    margin: 0 auto; /* center horizontally */
}

/*******************************************************/
/* [OPTIONAL] specific 'newspaper' style and eye-candy */
/*******************************************************/
header { width: 100%; text-align: center }

[newspaper*=".gaps"] {
    column-gap: .5rem;      /* HTML default gap width / 2 = 8px / 16 = 0.5rem */
    padding: .5rem .5rem 0; /* 0 to counteract '[newspaper]>* margin-bottom' */
}
[newspaper*=".gaps"]>* {
    margin-bottom: .5rem;   /* some distance when content wraps; make equal to 'column-gap' */
}

/**********************************************/
/* [OPTIONAL] personal preferred global rules */
/**********************************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, *   { box-sizing: inherit }

body {
    margin: 0;          /* disable default HTML (8px) */
    min-height: 100%;   /* at least fill viewport */
}
p { 
    margin : 0;         /* disable default HTML (='1em 0') */
    padding: 1em 0;     /* using padding instead */
}
img {
    display: block;     /* default 'inline', 'block' removes unwanted space below image */
    object-fit: cover   /* stretch/clip to fit when smaller/larger than given/claimed space */
}

/* debugging the layout: show all elements with outlines (put in <body>) */
[outlines="1"] * { outline: 1px dashed }

<body outlines="0">
    <header><h1>Three Equal Columns</h1></header>

    <header><h3>no gaps</h3></header>
    <div class="row cols-3">
        <div class="column" style="background-color: #aaa;">
            <img src="https://img.icons8.com/pastel-glyph/2x/person-male.png">
            <h2>Column 1</h2>
            <p>Some text..Tutorial to learn more about website layouts</p>
        </div>
        <div class="column" style="background-color: #bbb;">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9ZSW2Y6SmhAL8R0yD_9rZjTGvlT79DWkBBULhSg5vVoREb9r5_g&s">
            <h2>Column 2</h2>
            <p>Some text..Tutorial to learn more about website layouts Tutorial to learn more about website layouts</p>
        </div>
        <div class="column" style="background-color: #ccc;">
            <img src="https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png">
            <h2>Column 3</h2>
            <p>Some text..</p>
        </div>
    </div>

    <header><h3>with gaps</h3></header>
    <div newspaper="3.gaps">
        <div class="column" style="background-color: #aaa;">
            <img src="https://img.icons8.com/pastel-glyph/2x/person-male.png">
            <h2>Column 1</h2>
            <p>Some text..Tutorial to learn more about website layouts</p>
        </div>
        <div class="column" style="background-color: #bbb;">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9ZSW2Y6SmhAL8R0yD_9rZjTGvlT79DWkBBULhSg5vVoREb9r5_g&s">
            <h2>Column 2</h2>
            <p>Some text..Tutorial to learn more about website layouts Tutorial to learn more about website layouts</p>
        </div>
        <div class="column" style="background-color: #ccc;">
            <img src="https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png">
            <h2>Column 3</h2>
            <p>Some text..</p>
        </div>
    </div>
</body>

create a Three Equal Columns in height

3 Answers3