Aligning or positioning two divs to be equal in size alongside other divs

I am facing an issue trying to make two divs (.profile-spotify, .profile-games) the same size as .profile-card and .profile-details, or centering them. I've attempted using justify-center, margin auto, and other methods but none have been successful.

Here is the structure of the markup:

<div class="user-content">
    <div class="grid sm:grid-cols-1 lg:grid-cols-2 mt-3">
        <!-- Profile Card -->
        <div class="profile-card text-center m-auto">
            ...
        </div>
        <!-- End of Profile Card -->
        
        <!-- Profile Details -->
        <div class="profile-details text-white m-auto mt-3 lg:mt-0">
            ...
        </div>
        <!-- End of Profile Details -->
    </div>
    <!-- Spotify Activity -->
    <div class="profile-spotify mt-5 mb-5 m-auto">
        <div class="profile-spotify-header">
            ...
        </div>
        <div class="profile-spotify-content">
            ...
        </div>
    </div>
    <!-- End of Spotify Activity -->
    
    <!-- Game Activity -->
    <div class="profile-games mt-5 mb-5 m-auto">
        <div class="profile-game">
            ...
        </div>
    </div>
    <!-- End of Game Activity -->
</div>

And below is the relevant CSS snippet:

...
.user-content {
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.user-content .profile-card {
background: #1f2325;
width: 15rem;
}
.user-content .profile-spotify, .user-content .profile-games {
background: #1f2325;
max-width: 30rem;
}
.user-content .profile-spotify-header {
background: #21d363;
padding: 0.5rem 1rem 0.5rem 1rem;
}
...

https://i.sstatic.net/JR67g.png

https://codepen.io/wYonut/pen/eYrQoRr

I want the layout to look like this:
https://i.sstatic.net/0mP7J.png

Answer №1

To apply a flex layout, use display:flex; on the parent element and flex:1; on the children elements.

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container>div {
  flex: 1;
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  font-size: 30px;
}
<div class="flex-container">
  <div>
    first <br> content
  </div>
  <div>second content</div>
</div>

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

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...

What is the best way to arrange two buttons in a row with a border separating each row?

I am currently working with angular 8 and I am in need of creating a webpage design using HTML, CSS, or Bootstrap. The issue I am encountering is how to align every two buttons next to each other with borders, and once the first row is completed, move to ...

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

Ways to quickly change a class when clicking (without waiting for mouse button release)

Is there a way to instantly change the color of my span element when it's clicked by the user, rather than waiting for the mouse button to be released? This is the CSS code I'm using for the class: span.active{ color:#bdbcae; } I've tri ...

When the form is submitted, delete the file and its corresponding record

Currently, I have a form that deletes a record from my MySQL database. The database stores the image/file name. I am looking to enhance the statement so that it also removes the file in the website directory with the corresponding image/file name. If bot ...

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...

Customizing nvd3 chart colors with CSS: A step-by-step guide

Currently, I am faced with a challenge in SugarCRM as I try to modify the colors of nvd3 charts using CSS. The pie chart colors are structured differently compared to other nvd3 charts, making it difficult for me to figure out how to customize them through ...

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

Transform your CSS styles into Material-UI makestyles

I am looking to implement an IconButton with a website preview feature that appears when the user hovers over the help icon. I came across a similar solution using CSS, but I need to convert it to Material UI. Here is the CSS code that needs to be converte ...

Hover over CSS sprite

My anchor tag looks like this: <a href="#"> <i class="ico01"></i> <span>Text</span> </a> The ico01 class applies an image using CSS sprite. I want to change the background color of the entire content inside the a ...

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

Frustrated with the endless page loading caused by three.js

I've been trying to incorporate three.js code to showcase a 3D model in GLTF format, but my webpage keeps getting stuck on pre-loading. I need assistance with displaying a preloading page until all the files are fully loaded. Any help in resolving th ...

Ways to ensure that a div's height matches its width

Is there a way to make three divs, each with the CSS property display:inline-block, have a 1:1 ratio of width to height using only CSS? Currently, the width is set to 30% and the height to 75%, causing the width to be greater than the height. #our_servi ...

Is it possible to make a div's width 100% until a certain point, and then change it to 30% beyond that breakpoint?

I am trying to work with a div element <body style="width: 100vw; height: 100vh"> <div id="containerDiv"> <div id="canvasDiv" /> </div> </body> My goal is to adjust the width of canvasDiv based on the screen size. ...

The scss function is returning an invalid property value

In my Angular project, I have organized my scss files/folders in the following way: 1) Settings - containing color settings and functions for the project 2) Files and folders defining variables such as fonts, widths, etc. for components and pages 3) Fil ...

Splitting the page in half

Is there a way to ensure that the LeftArea and wuiMainPageNav sections stay side by side regardless of the browser window size? When I resize the window, the layout gets messed up with wuiMainPageNav moving down. Any suggestions on how to address this issu ...

What is the best way to create a read-only input field?

https://i.sstatic.net/36h6s.png The code I attempted to use did not produce the desired result <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f ...

Adding color to characters, digits in an HTML file

Is it possible to individually style each letter, number, and symbol in an HTML document with a unique color? I am interested in creating a text editor that applies specific colors to each glyph for those who have grapheme-color synesthesia. While there ar ...

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

Chrome reload causing page to automatically scroll to bottom on my website

Could really use some assistance in solving this problem as I am completely stumped. I've noticed an issue on one of my websites when pages are reloaded. Every now and then (not consistently, which adds to the confusion), upon refreshing a page, it ...