CSS - Organization of Rows and Columns

I am in the process of designing a website that will feature news content, and I would like to give it a layout similar to a reddit news box. The layout would resemble the following structure. I am using angular material and CSS exclusively, without any frameworks like bootstrap.

_____________________________________
|Column 1  |  Column2 - Area 1        |
|Column 1  |  Column2 - Area 2        |
|Column 1  |  Column2 - Area 2        |
|Column 1  |  Column2 - Area 2        |
|Column 1  |  Column2 - Area 2        |
|Column 1  |  Column2 - Area 2        |
|Column 1  |  Column2 - Area 2        |
|_____________________________________|
|Coulmn 1  |  Column2 - Area 3        |
______________________________________

I have experimented with different variations using display: flex, but I am having difficulty arranging it properly. Can anyone provide assistance?

This is what I've attempted so far:

<div class="news-container">
  <div class="news-header">
    <div class="news-vote-column">
      <div>
        <mat-icon matSuffix color="accent" class="clickable-icon" (click)="voteUp()">arrow_drop_up</mat-icon>
      </div>
      <div class="vote-number">1</div>
      <div>
        <mat-icon matSuffix color="accent" class="clickable-icon" (click)="voteDown()">arrow_drop_down</mat-icon>
      </div>
    </div>
     <div>
      <h3>I am a new post!</h3>
    </div>
    <div>
      <h5>- Posted by admin - 10/10/2019 12:00</h5>
    </div>
  </div>
</div> 

.news-container {
  margin-bottom: 1em;
  background-color: #f1f2f3;
  border: #7e868d 1px solid;
  border-radius: 5px;
  min-height: 200px;
}

.news-vote-column {
  min-height: 200px;
  min-width: 40px;
  background-color: #d2d3d6;
  border-radius: 5px 0 0 5px;
  text-align: center;
}

.news-header {
  display: flex;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #7e868d;
  h3 {
    margin: 2px 2px 2px 10px;
  }

  h5 {
    color: #cecfd1;
    margin: 5px;
  }
}

.vote-number {
  text-align: center;
  margin: 2px 2px 2px 2px;
}

.clickable-icon {
  cursor: pointer;
}
htmlcss

Answer №1

Check out this solution: https://jsfiddle.net/YvanBarbaria/a82ub30p/

I utilized flexbox to properly position your div element. It's a quick fix that should meet your requirements. You can easily iterate over your Angular template using the "col" class.

<div class="cols-container">
  <div class="col">
    <div class="col1">
      <span>
        Column
      </span>
      <span>
        1
    </span>
    </div>
    <div class="col2">
        <div class="col2-name">
          <span>
            Column
          </span>
          <span>
            2
          </span>
        </div>
         <div class="col2-area">
          <span>
            Area 1
          </span>
        </div>
    </div>
  </div>
</div>


.cols-container {
  display:flex;
  flex-direction: row;
  width: 100%;
    height: 100%;
  .col {
    display: flex;
    flex-direction: row;
    width: 100%;

    .col1 {
       flex-grow:1;
    }
    .col2 {
       flex-grow:1;
       display: flex;
       .col2-name {
         flex-grow:1;
       }
        .col2-area {
         flex-grow:1;
       }
    }
  }
}

Answer №2

After some tinkering, I managed to create this solution: https://jsfiddle.net/dtq1p0w4/

<div class="article-container">
  <div class="article-vote-section">
    <div>
      <mat-icon matSuffix color="accent" class="clickable-icon" (click)="upVote()">arrow_drop_up</mat-icon>
    </div>
    <div class="vote-count">1</div>
    <div>
      <mat-icon matSuffix color="accent" class="clickable-icon" (click)="downVote()">arrow_drop_down</mat-icon>
    </div>
  </div>
  <div>
    <div class="article-heading">
      <h3>Check out this cool post!</h3>
      <h5>- Posted by Admin - 10/10/2019 12:00</h5>
    </div>
    <div class="article-details">
      Explore the latest news here!
    </div>
  </div>
</div>

.article-container {
  margin-bottom: 1em;
  background-color: #f1f2f3;
  border: #7e868d 1px solid;
  border-radius: 5px;
  min-height: 200px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
}

.article-vote-section {
  min-width: 40px;
  background-color: #d2d3d6;
  border-radius: 5px 0 0 5px;
  text-align: center;
}

.article-heading {
  display: flex;
  color: #7e868d;
  h3 {
    margin: 2px 2px 2px 10px;
  }

  h5 {
    color: #cecfd1;
    margin: 5px;
  }
}

.vote-count {
  text-align: center;
  margin: 2px 2px 2px 2px;
}

.clickable-icon {
  cursor: pointer;
}

.article-details {
   margin: 10px;
}

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

Is there a way to transfer all the selected items to PHP using AJAX?

I am looking for a way to send all the checked items into PHP using AJAX. I want to include the checkbox ID and inner text in the information that is sent. For example, if I check box1 and box2, I want the relevant information to be saved in Data and then ...

javascriptphpjqueryhtmlajax

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

javascripthtmlarrayssortinglocal-storage

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

Is it possible to store multiple values into a single variable and then access them in a setTimeout function? $(document).ready(function (){ div ({'div':'#noo','auto':'true','pos':'top',' ...

javascriptjqueryhtmlwebsettimeout

Is there a way to delete a wrapper (parent element) in Angular without deleting the child element as well?

The solution provided in this answer on Stack Overflow addresses jQuery and not Angular or TypeScript. My inquiry bears resemblance to this question raised on a forum, but I am specifically looking for a resolution within the context of Angular. Is there ...

htmlangulartypescriptdomdom-manipulation

Unable to align text in the middle of the header

Seeking help with my design flaws, I have created a fiddle to showcase the issues that arise when attempting to make it responsive. The main problem is that the HEADING IN CENTER text is not aligned properly in the center. If I remove the position attribut ...

htmlcssresponsive-designsemantic-ui

Fetching data in VueJs before redirecting to a new page

Within the mounted function, I am creating an action that fetches data from a Rest API and populates my table in a Vue.js component mounted() { UserService.getProjects().then( (response) => { this.isProject = true; this.project ...

javascripthtmlcsstypescriptvue.js

Incorporate a header into the <img> request

Is it possible to include a header in a standard HTML <img> tag? Currently, we have: /path/to/image.png However, this path is actually a RESTful endpoint that requires a userID header. GET /path/to/image.png Header userId: BobLoblaw This endpoin ...

javascripthtmlangularjs

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Is it possible to change the background color of the active NavItem element to green using inline CSS in React Bootstrap and React Router Dom? I am currently using TypeScript 2.2 and React. If not, should I create a CSS class instead? Here is the code sni ...

csstwitter-bootstrapreactjstypescriptreact-bootstrap

The Harp server generates excessive white space within HTML documents

Running a blog on Harp has been smooth sailing, except for one issue that I can't seem to figure out. The project utilizes EJS and the problem lies in the outputted HTML containing excessive whitespace. I've attempted to minimize it, especially w ...

htmlejsremoving-whitespaceharp

Utilize CSS to selectively apply the mix-blend-mode property to targeted elements

In my project, I am aiming to utilize the mix-blend-mode property to give certain SVG paths the appearance of an erasing path by blending them with a background image on the stroke. However, I have encountered a challenge where the mix-blend property affec ...

htmlcsssvgimage-maskingmix-blend-mode

Tips for utilizing jQuery to display images similar to videos

Are there any plugins available that can create a video-like effect on images by incorporating scroll, pan, tilt, zoom (in/out) transitions for a few seconds before fading to the next image? I've searched but haven't found anything quite like thi ...

javascriptjqueryimagehtml

The button will continue to be enabled even if the textfield is empty

I have a task to implement a feature on a webpage where the submit button should remain disabled until all values are entered in the textbox. However, I am facing an issue where the submit button is already active when the page loads. .directive('pas ...

javascripthtmlangularjs

Utilizing conditional statements and time to dynamically alter the class of an object

I need to change the class of an object based on the time, with two classes available: recommendedspot and notrecommended. The code I've written so far is not displaying the image correctly. Can someone help me troubleshoot this issue? Here is my cur ...

javascripthtmlcssdatetimeif-statement

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

jqueryhtmlcss

The sidebar appears to be hovering above the footer section

I am currently working on creating a sidebar that sometimes ends up being longer than the main content section. You can check out my demo here: http://jsfiddle.net/y9hp4evy/1/ and another case here: http://jsfiddle.net/y9hp4evy/2/ (If I add a height to th ...

htmlcss

Is the image inside a responsive div?

I'm currently working on my first website that I am proud of, and I am in the process of creating a background using CSS and an image. I want it to look exactly like the picture. . I have successfully achieved this (accomplished already), but the is ...

htmlcssresponsive

Curious about the method of refining a list based on another list?

As a beginner in coding, I am facing a challenge in my code.org assignment. I need to filter songs by a specific artist from a dataset. Currently, I have code that randomly selects an artist, but I am struggling to filter out songs by that artist from the ...

javascripthtml

Adapt appearance according to the length of the text

Currently, I have an array that stores multiple strings based on displayed charts. My objective is to find the longest string within this array. So far, this task has been executed without any issues. The code snippet for this process is as follows: var ...

javascriptjquerycssstyles

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

javascriptjqueryhtml