construct three columns that are equal in height

Check out this simplified code snippet for creating three perfectly aligned columns:

* {
  box-sizing: border-box;
}

/* Create three equal columns that float 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>Creating 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>

If you encounter distortion when adding images to each column, let's resize them with CSS for a perfect alignment:

* {
  box-sizing: border-box;
}

/* Create three equal columns that float 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>Resizing Icons With CSS</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
  <img src="https://img.icons8.com/p/&2x/person-male.png" style="max-width: 100%">
    <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" style="max-width: 100%">
    <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" style="max-width: 100%">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

To ensure that each image fits seamlessly within the layout without distorting the text, we apply CSS rules for resizing the icons.

htmlcss

Answer №1

To make sure images maintain their proportions, simply apply max-width: 100%; For consistent column heights, consider using Flexbox as illustrated in the example below

* {
  box-sizing: border-box;
}
img {
    max-width: 100%;
    max-height: 170px;
    margin: 0 auto;
    display: block;
}

.wrapper {display: flex;}
.column {
  width: 33.33%;
  padding: 10px;
}

.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>

Answer №2

By arranging the images into columns, you may have noticed that the heights are not consistent due to varying image sizes. To achieve a perfect layout, it is recommended to use images with identical dimensions (e.g. created with Figma). This will ensure a polished appearance for your design.

In the meantime, you can experiment with the following code:

<!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 trust this information proves helpful. - Warm regards from Switzerland!

Answer №3

Although I fully endorse the use of the 'Flexbox Layout', my code demonstrates how to achieve the desired outcome using traditional CSS column properties, eliminating any hassle and unnecessary overhead that may come with FBL.

I have also ensured that the initial layout is 'responsive' by incorporating .row {...column-width...} along with a bit of mathematical calculation (linear equation y=mx+b, MathIsFun: Equation of a Straight Line) within a CSS calc(). If you prefer a non-responsive design, simply disable or remove .row {...column-width...} from the final code.

To provide a comparison between CSS custom properties and classes, I included a second row with slight spacing adjustments between columns.

The code is segmented into two parts:

  • [MANDATORY], containing essential CSS for functionality
  • [OPTIONAL], highlighting additional aesthetic enhancements that can be safely removed

All detailed explanations are embedded within the code for easy reference as you navigate through it...

minor update: refer to w3schools: CSS Selector Reference for insights on utilizing CSS selectors in the code.

Snippet

/*****************************************/
/* [MANDATORY] generic 'newspaper' style */
/*****************************************/
/*
    This CSS snippet defines a 'newspaper' style format accommodating varying numbers of columns.
    By utilizing a CSS 'custom property' instead of classes, handling different column counts becomes more convenient. 
    Embedded classes illustrate usage differences, allowing flexibility between approaches.

*/
.row, [newspaper] {
    display: block !important;
    column-fill: balance;     
    column-gap: 0;              
}
.row *, [newspaper] * {
    break-inside: avoid;        
}
.row.cols-3,
[newspaper*="3"] {

    column-count: 3;
    column-width: calc(10vw + 288px);

}
.column {
    height: calc((10vw + 288px) * 1.2);
}
.column>img {
    
    height: 10rem;  
    margin: 0 auto; 

}

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

[newspaper*=".gaps"] {
    column-gap: .5rem;      
    padding: .5rem .5rem 0; 
}
[newspaper*=".gaps"]>* {
    margin-bottom: .5rem;   
}


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

body {
    margin: 0;          
    min-height: 100%;   
}
p { 
    margin : 0;         
    padding: 1em 0;     
}
img {
    display: block;     
    object-fit: cover  
    
}

[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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for choosing specific CSS selectors from a variety of different stylesheets

Currently, I am using two different stylesheets - Bootstrap 4.0 and Materialize 4.0. My challenge is selecting specific selectors from both stylesheets but overriding conflicting styles. For instance, I would like to apply the header navigation style fro ...

htmlcssbootstrap-4materialize

What is the reason for JQuery generating unnecessary <p></p> tags in this HTML code?

I attempted to use both the append and html methods in JQuery, but both approaches created a set of empty <p></p> tags before and after the <table> element when given this specific string: '<p>Blah blah my table below:</p&g ...

jqueryhtml

Using Jquery to Select Start and End Dates

I currently have two date input fields labeled as Start Date and End Date for a specific Project. If the user chooses a start date that is earlier than today's date but does not choose an EndDate, I want to indicate that the project is ongoing. How c ...

jqueryhtml

Issue with plotted point labels failing to display correctly on X Range Chart for the initial date of each month - Highcharts

Currently, I am implementing a chart that displays the timeline of activities using an x range. However, I have encountered an issue with the popup displaying data information when hovering over the bars. The problem arises specifically on the first date ...

javascriptc#cssasp.nethighcharts

There seems to be a malfunction with the add and subtract feature in my shopping cart

My cart contains a jquery code for adding and deleting products, but it is not updating the quantity correctly. Additionally, there is an error where after adding an item to the cart, it displays the total amount as double the actual price. For example, if ...

phpjqueryhtmlmysqlcss

Converting HTML documents into spreadsheet files

In a recent project with an NGO, I was tasked with creating a form interface and saving the submitted values to an excel sheet. My current approach involves using html and php to build the form and then converting it to an excel spreadsheet. I'm curio ...

phphtmlexcel

Button not triggering .hide() function as expected

Today, I've been attempting to implement a feature that involves making an image disappear when a button is clicked. Despite its simplicity, it doesn't seem to be functioning as expected. :/ Below is the HTML code snippet: <img id="project ...

javascriptjqueryhtml

Applying CSS fails when transferring it to a stylesheet

I encountered an issue with a Bootstrap progress bar that is causing conflicts with my CSS. I am attempting to move the CSS to a separate stylesheet instead of embedding it in my ejs file. However, when I try to link it using <link href="/views/s ...

htmlcssbootstrap-4ejs

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

javascriptjquerycsscheckbox

Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap: <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class= ...

htmlcssbootstrap-5

Disruption of HTML file content

When I open my HTML file directly, the entire content appears messed up. However, when I view it through live preview in Brackets, everything looks fine. What could be causing this issue? Keep in mind that I am using CSS and JavaScript files from Bootstr ...

htmlbootstrap-4

Limit the radius to only apply on big screens using tailwind css

Is there a way to apply border radius to an image only on larger screens and maintain straight edges on smaller screens? I'm working with Nextjs and Tailwind CSS. ...

cssresponsive-designnext.jstailwind-css

Using the HTML attribute AUTOCOMPLETEFOR as a mandatory field

I am facing an issue with the following line of code. I have marked the field as "Required", but for some reason, it is not being enforced when running the code. The field still allows empty values. @Html.AutocompleteFor(model => model.AgenteNaviero_Co ...

c#htmlasp.net

Update the jQuery script tag with new content - rewrite everything

I am facing an issue with jquery. I need to change the link to src only when "document.write" is present. Below is my code: myscript.js document.write("TEST ABCD"); test.html <html> <body> <button id="example">click me</button&g ...

javascriptjqueryhtml

Stopping HTML 5 video playback while transitioning to a different webpage

My website has a layout with a left menu containing video links and a content area where the videos are played. However, I have encountered an issue when switching between videos. Currently, if I click on Video 1 and then decide to watch Video 2 while Vid ...

jqueryhtmlvideo

Tips for dynamically adjusting the CSS cursor in a Vue.js application

Is it too ambitious to try and recreate a custom cursor tool like cursomizer using Vuejs? I've hit a roadblock where I need to dynamically change the cursors displayed. These cursors are SVG files that should be accessible from the next component, all ...

cssvue.jscursorvue-component

Customize DAT.GUI: adjust the width of the text field to accommodate longer text entries

Is there a way to increase the width of a text field using DAT.GUI library in JavaScript? According to this source, you can achieve it by setting the style attribute for the first controller like this: gui.add(params, 'StartingVector').name(&apo ...

javascriptcssdat.gui

In a grid container, a child element utilizing `overflow-y: auto` will not be able to scroll

<script src="https://cdn.tailwindcss.com"></script> <div class="h-screen grid grid-rows-[auto,1fr]"> <div class="bg-slate-300 h-24 flex items-center px-4"> <h1 class="text-3xl">Navbar</h1> </div> <div ...

csstailwind-css

Why is my card not laying flat in a horizontal position?

Could you please assist with aligning the cards horizontally in a row instead of vertically? I would like to have 3 cards in one row. Thank you. <div class="container"> <div class="row"> <div class="col-md-4"> <di ...

htmlbootstrap-5bootstrap-cards

What are the steps to enable the tab button feature?

Instead of using the ul and li tags, I have implemented three tabs with buttons. My goal is to automatically make the first button active or change its color to green. Despite using the active class in bootstrap, it does not seem to work as expected. How ...

cssvue.jsbootstrap-4