Place a single div above two divs in a flexbox container

I am struggling with aligning the fourth div, which has a class of "details", above the second and third div in a flex box layout. Despite my efforts, I have not been successful in achieving this alignment. Can someone please assist me?

.flex-container {
  display: flex;
  align-items: space-between;
  height: 500px;
  background-color: #f1f1f1;
  width: 45%;
}
.flex-container > div {
  color: white;
  width: 130px;
  margin: 10px;
  
  line-height: 75px;
  
  color:black;
  font-weight:bold;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
}
.calu
{
  height: 49%;
  align-self:flex-end;  
}

.calu_ {background-color: #C90399;}
.punjj_ {background-color: #F44336;}
.punjj
{
  height: 48%;
  align-self:flex-end;
  
}

.bajet {background-color: #FE0857;}
.details
{
  flex-basis: 30%;
  height: 60%;
  box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
  font-size: 15px;
  
}

.vertical 
{
    box-shadow: inset 0px 4px 6px #ccc;
}

.progress {
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
    box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
    text-align: center;
    font-size: 15px;
}   

.progress-bar {
    box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
<p><h1>The align-self Property</h1></p>
<div class="flex-container">
    <div class= "progress vertical" >1
      <div class="progress-bar bajet"  style="height: 35.19%;"></div>
    </div>
    
    <div class= "progress vertical calu">2
      <div class="progress-bar calu_"  style="height: 38.65%;"></div>
    </div>
    
    <div class= "progress vertical punjj">3
      <div class="progress-bar punjj_"  style="height: 31.65%;"></div>
    </div>
    
    <div class="details" style="background-color:#90EE90;">4</div>
</div>

Please refer to the sample image for clarification:

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

htmlcssflexbox

Answer №1

It would be more straightforward and effective to utilize grid layout for this scenario.

.flex-container {
  display: inline-grid;
  grid-template-columns: repeat(6, 130px);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 5px;
  height: 500px;
  background-color: #f1f1f1;
}

.progress.vertical:first-child {
  grid-row: 1 / -1;
  grid-column: 1 / 3;
}

.calu {
  grid-row: 4 / -1;
  grid-column: 3 / 5;
  background-color: #C90399;
}

.punjj {
  grid-row: 4 / -1;
  grid-column: 5 / 7;
  background-color: #C90399;
}

.details {
  grid-row: 2 / 3;
  grid-column: 3 / -1;
  background-color: #C90399;
  box-shadow: inset 0px 4px 6px rgba(100, 100, 100, 0.6);
  font-size: 15px;
}

.flex-container>div {
  line-height: 75px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  text-align: center;
}

.bajet {
  background-color: #FE0857;
}

.calu_ {
  background-color: #C90399;
}

.punjj_ {
  background-color: #F44336;
}

.vertical {
  box-shadow: inset 0px 4px 6px #ccc;
}

.progress {
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0px 4px 6px rgba(100, 100, 100, 0.6);
  text-align: center;
  font-size: 15px;
}

.progress-bar {
  box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
<div class="flex-container">
  <div class="progress vertical">1
    <div class="progress-bar bajet" style="height: 35.19%;"></div>
  </div>

  <div class="progress vertical calu">2
    <div class="progress-bar calu_" style="height: 38.65%;"></div>
  </div>

  <div class="progress vertical punjj">3
    <div class="progress-bar punjj_" style="height: 31.65%;"></div>
  </div>

  <div class="details" style="background-color:#90EE90;">4</div>
</div>

Check out the jsFiddle demonstration here

Answer №2

If you're looking for a quick and possibly unconventional fix, consider using position: absolute for the fourth item in your design. You can apply a relative position to the parent element .flex-container and then customize the positioning of your details as desired.

.flex-container {
  display: flex;
  align-items: space-between;
  height: 500px;
  background-color: #f1f1f1;
  width: 45%;
  position: relative;
}
.flex-container > div {
  color: white;
  width: 130px;
  margin: 10px;
  
  line-height: 75px;
  
  color:black;
  font-weight:bold;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
}
.calu
{
  height: 49%;
  align-self:flex-end;  
}

.calu_ {background-color: #C90399;}
.punjj_ {background-color: #F44336;}
.punjj
{
  height: 48%;
  align-self:flex-end;
  
}

.bajet {background-color: #FE0857;}

.flex-container .details {
    height: 60%;
    box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
    font-size: 15px;
    position: absolute;
    right: 0;
    height: 40%;
    width: 60%;
}

.vertical 
{
    box-shadow: inset 0px 4px 6px #ccc;
}

.progress {
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
    box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
    text-align: center;
    font-size: 15px;
}   

.progress-bar {
    box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}
<p><h1>The align-self Property</h1></p>
<div class="flex-container">
    <div class= "progress vertical" >1
      <div class="progress-bar bajet"  style="height: 35.19%;"></div>
    </div>
    
    <div class= "progress vertical calu">2
      <div class="progress-bar calu_"  style="height: 38.65%;"></div>
    </div>
    
    <div class= "progress vertical punjj">3
      <div class="progress-bar punjj_"  style="height: 31.65%;"></div>
    </div>
    
    <div class="details" style="background-color:#90EE90;">4</div>
</div>

If you prefer to stick with a solution using only display: flex;, it may require adjustments to your HTML structure.

Answer №3

Did you accomplish your goal with this solution? https://i.sstatic.net/GnGF0.png

To achieve the desired outcome, make sure to place your "floating" div inside a container that has display set to flex and justify-content set to center. Cheers.

<html>
<head>
    <style>
        .a {
            display:flex;
            flex-direction: row;
            width:500px;
            height:500px;
            border: 1px solid black;
        }
        
        .ba {
            display:flex;
            width:25%;
            height:100%;
            background-color:red;
        }
        
        .bb {
            display:flex;
            width:75%;
            height:100%;
            flex-direction:column;
        }
        
        .ca{
            display:flex;
            width:100%;
            height:50%;
            flex-direction:column;
            justify-content:center;
        }
        
        .cb{
            display:flex;
            width:100%;
            height:50%;
            flex-direction:row;
        }
        
        .da{
            display:flex;
            width:100%;
            height:50%;
            background-color:green;
        }
        
        .db{
            display:flex;
            width:50%;
            height:100%;
            background-color:blue;
        }
        
        .dc{
            display:flex;
            width:50%;
            height:100%;
            background-color:pink;
        }
    
    </style>
</head>
<body>
    <div class="a">
        <div class="ba">
        </div>
        <div class="bb">
            <div class="ca">
                <div class="da">
                </div>
            </div>
            <div class="cb">
                <div class="db">
                </div>
                <div class="dc">
                </div>
            </div>
        </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

Achieve the sticky effect for text in a HTML div using CSS to keep it anchored to the

Seeking advice on how to create a floating box that remains in the bottom right corner of a div using CSS. Any tips or suggestions are appreciated! (Here's an example of what I'm aiming for: https://i.stack.imgur.com/DkD5C.png) ...

htmlcss

Changing the screen size of a panel using asp.net and c#

When my screen size reaches 480px, I want to remove one menu and replace it with another. The solution I'm considering is creating two panels. In this setup, I would set menu1 to false when the screen size is less than 480px and menu2 to true. Conve ...

c#cssasp.nettwitter-bootstrappanel

Angular does not employ any Bootstrap styles when rendering

I have successfully installed both Ngb and Bootstrap 4 using the commands provided below, with the root module importing the package as well. npm install @ng-bootstrap/ng-bootstrap --save npm install bootstrap@next --save Within my code, I am attem ...

csstwitter-bootstrapangularsassbootstrap-4

Customizing skin CSS for DNN Portal and Page images

Currently, I have a unique custom skin that I personally created. It is implemented on multiple portals that I am responsible for managing. My goal is to incorporate the ability for the header image to change based on the specific page being viewed. The he ...

cssdotnetnukedotnetnuke-7

Loading dynamic CSS on WordPress frontend only

I am facing an issue with the dynamic css file in my WordPress theme that is loaded using Ajax. The problem is that it also loads this dynamic css file for the backend. Can someone help me modify my code so that it only loads the dynamic css file for the f ...

cssajaxwordpressdynamic

Copy and paste content from Outlook, Word, or any Office software directly into the embedded browser

Our application is performing well, but there is an issue with some users copying text to Word before pasting it into the app. The HTML gets parsed out somewhat correctly, but it often includes tags from outlook or word that our XHTML engine doesn't r ...

htmlms-office

Implementing dual backgrounds in CSS

I am trying to achieve a gradient background for li elements along with different image backgrounds for each individual li. Is there a way to accomplish this? List of items: <div id="right_navigation_container"> <ul> <li id ...

htmlcss

Using NPM in conjunction with a PHP/STATIC web site directory structure: A comprehensive guide

My PHP website has a file structure like this: / css/ js/ index.php When I run the following commands: npm init npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5dd">[email p ...

javascriptphpcssnpmbootstrap-4

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

What method is best for deleting an item from the database in HTML structure - POST, GET, or XHR action?

I have a webpage that displays content in a table format and allows users to delete a specific row by clicking on it. The structure of my rows is as follows: foreach ($rewards as $reward) { echo '<tr id="' . $reward[&apos ...

javascriptphpjqueryhtmlajax

Having trouble with a dropdown menu that allows for multi-select options?

var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = fa ...

javascripthtmlcssvue.jsng-dropdown-multiselect

Enhance Your Images with Hovering Icons

Is there a way to display an icon checkmark over the main image when a user hovers over it? The icon should appear in the top right corner of the image. <div> <img class="result-image" src="{{$property->photo}}"> <! ...

htmlcss

Tips For Making Your Bootstrap 4 Page Fit Perfectly on Mobile Screens

Currently in the process of developing . The frontpage has been created and tested using Chrome's dev console's device toolbar. Ensured that the correct viewport is set and utilized Bootstrap's column system for stacking elements. However, ...

htmlcssmobilebootstrap-4

The clash between Traditional JavaScript and jQuery

As I pored over a textbook, I found myself stumped by an example problem. Here is the HTML code in question: $(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); console.log("check all"); }); $("#checkNo").cl ...

javascriptjqueryhtml

Space within a series of photographs

Looking for some assistance: I am trying to maintain a consistent margin of 10px between posts and between photos in a photoset. However, when a post is a photoset, the margins of the bottom photo and the overall post add up to 20px. I want to retain the ...

htmlcssmarginmargins

Retrieve data from an Observable containing JSON objects

I am currently working with a Http request that returns Json data, which I then store in an observable. { "proyecto":{ "nombre": "Mercado de Ideas", "tecnologias": [ { "nombre": ".NET", "icono": "http://getsetwebsit ...

htmlangularjsjsonionic2observable

Issue encountered: Unable to locate the file "SignInScreen" within the directory "./src/screens/authScreens" as referenced in the file "App.js"

App.js: import { StyleSheet, Text, View, StatusBar } from "react-native"; import { colors, parameters } from "./src/global/styles"; import SignInScreen from "./src/screens/authScreens/SignInScreen"; export default function A ...

javascripthtmlreactjsreact-nativefrontend

Having trouble making elements in Tailwind CSS take up the entire page? Seems like they're getting stuck in smaller containers instead

I've been working on creating a layout for my webpage that is similar to the one found here: However, despite using Tailwind CSS, I'm having trouble with the flex styling and getting it to display correctly. import { ChevronRightIcon, HomeIc ...

cssreactjstailwind-css

How to Align Paypal Button in the Middle of a Table Cell within a Concealed Form Using HTML and

Currently, I am in the process of developing a payment page that enables payments through Paypal using Instant Payment Notification. The initiation of this process involves sending a POST request to Paypal via a submit button along with multiple hidden for ...

htmlcssalignmentvertical-alignment

Obtain the following image with every click

I have a div with images inside. I created two arrows (previous, next) within a larger div using the src of one of the images as the background URL for each arrow. My goal is to make the next arrow change the large image to the src of the following image w ...

javascriptphpjqueryhtmlcss