Attempting to create a webpage layout featuring three distinct columns, each showcasing unique content, all without relying on traditional table elements in CSS and

Question

Attempting to create a webpage layout featuring three distinct columns, each showcasing unique content, all without relying on traditional table elements in CSS and

After numerous attempts, I am uncertain if this can be accomplished.

I am trying to create an HTML page with 3 columns, each containing different elements. Despite trying various methods, I am stuck and unsure if this layout can only be achieved using a table.

Is there a way to structure the columns as shown in the sample grid below without altering the HTML code, but only utilizing CSS?

Desired Layout:

----------------------------------------------------
| Column left 1|   Column center   | Column right  |
---------------|                   |----------------
| Column left 2|                   |
---------------|                   |
| Column left 3|                   |
---------------|                   |
               |-------------------|

Current Output:

----------------------------------------------------
| Column left 1|   Column left 2   | Column left 3 |
---------------|-------------------|----------------
-------------------------------------
|   Column center   | Column right  |
|                   |----------------
|                   |
|                   |
|                   |
|                   |
|-------------------|

Below is the code for my recent attempt...

    * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 200px; /* Should be removed. Only for demonstration */
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    <h2>Three Columns</h2>

    <div class="row">
    <div>
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1 a</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#bbb;">
        <h2>Column 1 b</h2>
        <p>Some text..</p>
      </div>
    </div>
      <div class="column" style="background-color:#bbb;height: 650px">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
  </div>

Any assistance or recommendations would be greatly valued. Thank you in advance.

html css

Answer 1

Answer №1

If you're only looking to make changes in CSS, I recommend using the "display: flex" property. In my view, it's the optimal choice. For more information on this topic, check out my preferred resource.

* {
  box-sizing: border-box;
}

.column {
  padding: 10px;
  margin: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.row div {
  display: flex;
  flex-direction: column;
}

I trust that this suggestion will be beneficial and effective for your needs.

Answer 2

If you're only looking to make changes in CSS, I recommend using the "display: flex" property. In my view, it's the optimal choice. For more information on this topic, check out my preferred resource.

* {
  box-sizing: border-box;
}

.column {
  padding: 10px;
  margin: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.row div {
  display: flex;
  flex-direction: column;
}

I trust that this suggestion will be beneficial and effective for your needs.

Answer 3

Answer №2

If you want more control over how your containers are set up, consider using display: flex;. You can also fine-tune the spacing between elements by adjusting the padding.

.row {
  display: flex;
}
.column {
  flex: 1;
}
.col-1-cont {
  padding: 1rem;
}

    <h2>Three Columns</h2>

    <div class="row">
    <div class="column" id="column-1">
      <div class="col-1-cont" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="col-1-cont" style="background-color:#aaa;">
        <h2>Column 1 a</h2>
        <p>Some text..</p>
      </div>
      <div class="col-1-cont" style="background-color:#bbb;">
        <h2>Column 1 b</h2>
        <p>Some text..</p>
      </div>
    </div>
      <div class="column" style="background-color:#bbb;height: 650px">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc; height: 200px;">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
  </div>

Answer 4

If you want more control over how your containers are set up, consider using display: flex;. You can also fine-tune the spacing between elements by adjusting the padding.

.row {
  display: flex;
}
.column {
  flex: 1;
}
.col-1-cont {
  padding: 1rem;
}

    <h2>Three Columns</h2>

    <div class="row">
    <div class="column" id="column-1">
      <div class="col-1-cont" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="col-1-cont" style="background-color:#aaa;">
        <h2>Column 1 a</h2>
        <p>Some text..</p>
      </div>
      <div class="col-1-cont" style="background-color:#bbb;">
        <h2>Column 1 b</h2>
        <p>Some text..</p>
      </div>
    </div>
      <div class="column" style="background-color:#bbb;height: 650px">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc; height: 200px;">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
  </div>

Answer 5

Answer №3

It seems like the column class is being incorrectly applied to certain elements. The wrapper of the left column should be set as a column by using the column class, but it appears to just be a normal div (block element with 100% width).

To fix this issue, try restructuring your code as follows:

   * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 200px; /* This should be removed, as it's only for demonstration purposes */
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

<h2>Three Columns</h2>
    
        <div class="row">
        <div class="column"><!-- This is the wrapper that creates the column and should occupy 33% of the width -->
          <div style="background-color:#aaa;">  <!-- These columns should fill the total width within the 33% column wrapper, defining their individual widths -->
            <h2>Column 1</h2>
            <p>Some text..</p>
          </div>
          <div style="background-color:#aaa;">
            <h2>Column 1 a</h2>
            <p>Some text..</p>
          </div>
          <div style="background-color:#bbb;">
            <h2>Column 1 b</h2>
            <p>Some text..</p>
          </div>
        </div>
          <div class="column" style="background-color:#bbb;height: 650px">
            <h2>Column 2</h2>
            <p>Some text..</p>
          </div>
          <div class="column" style="background-color:#ccc;">
            <h2>Column 3</h2>
            <p>Some text..</p>
          </div>
      </div>

Answer 6

It seems like the column class is being incorrectly applied to certain elements. The wrapper of the left column should be set as a column by using the column class, but it appears to just be a normal div (block element with 100% width).

To fix this issue, try restructuring your code as follows:

   * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 200px; /* This should be removed, as it's only for demonstration purposes */
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

<h2>Three Columns</h2>
    
        <div class="row">
        <div class="column"><!-- This is the wrapper that creates the column and should occupy 33% of the width -->
          <div style="background-color:#aaa;">  <!-- These columns should fill the total width within the 33% column wrapper, defining their individual widths -->
            <h2>Column 1</h2>
            <p>Some text..</p>
          </div>
          <div style="background-color:#aaa;">
            <h2>Column 1 a</h2>
            <p>Some text..</p>
          </div>
          <div style="background-color:#bbb;">
            <h2>Column 1 b</h2>
            <p>Some text..</p>
          </div>
        </div>
          <div class="column" style="background-color:#bbb;height: 650px">
            <h2>Column 2</h2>
            <p>Some text..</p>
          </div>
          <div class="column" style="background-color:#ccc;">
            <h2>Column 3</h2>
            <p>Some text..</p>
          </div>
      </div>

Attempting to create a webpage layout featuring three distinct columns, each showcasing unique content, all without relying on traditional table elements in CSS and

Answer №1

Answer №2

Answer №3

Similar questions

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I keep encountering an Uncaught TypeError when trying to read the property 'options' of null, despite having the element ID properly defined

Tips on updating the default checkbox dynamically based on the current checkbox using JavaScript

What could be preventing my XPath from selecting a link/button using its label text?

Toggle sliding in an open or closed direction indefinitely

Guide to scraping data from a table using Python and BeautifulSoup

Tips for aligning a div within a flexbox to the bottom position

Creating an Active Link in Django Template

Is there a way to deactivate tabs in Bootstrap?

Utilizing PHP Code within Inline CSS in HTML guides

Enhance the functionality of jQueryUI sortable by enabling scrolling and incorporating a delay specifically for mobile

Loop through items in a list using Angular.js and display each item within an <

Design concept - Trigger an action upon clicking a checkbox within a table row

Elements floating in space, stretching across the entire width

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

Setting a variable equal to user input

Preventing the inclusion of current URL in the URL input

Display the div only when certain other divs have been clicked

Having Numerous HTML Tables All in One Page Accompanied by Written Content

Introduction beneath the photograph using the Bootstrap framework