In the middle of one div, there are two additional divs positioned nearby

I am facing a challenge with positioning three divs within one container. I want one to be on the right, another on the left, and the third one at the center, but so far I have not been successful;

<div id="durum3" style="width: 100%; height: calc(100% - 40px);">
  <div class="processes" style="width: 100%; height: 40%; max-height: 84px; border-bottom:2px solid #9d7db1; min-height: 64px; min-width: 240px;max-width: 360px">
    <div id="firmalar" style="height: 100%; background: red; width: 74px;float: left "></div>

    <div id="islemler" style="height: 100%; background: yellow; width: 74px; text-align: center;  float: left; margin: 0 auto;"></div>
    <div id="pin" style="height: 100%; background: blue; width: 74px; float: right;margin-left: 5px "></div>
  </div>

</div>

Any suggestions on how to resolve this issue?

htmlcss

Answer №1

If you utilize Flexbox, there is no need to specify a height:

<div style="background-color: #ccc; padding: 5px;">
  <div style="display: flex; height: 250px;">
    <div style="background-color: #99f; width: 25%"></div>
    <div style="background-color: #9f9; width: 50%"></div>
    <div style="background-color: #f99; width: 25%"></div>
  </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

"Enhance your website with captivating Javascript hover effects for

Can anyone assist me with incorporating the navigation hover effect seen on this website into my HTML/CSS project? The example site is built using a WordPress theme, but I am looking to apply that green effect to my own webpage and have the ability to cust ...

javascripthtmlcssmenunavigationbar

Using the glob function within a PHP include statement to search through numerous web directories

Greetings to all readers, this is my first time posting here. I have limited experience with PHP and would appreciate your patience as I navigate through it. I manage a large static website that heavily relies on PHP includes for various sections like hea ...

phphtmlincludeglob

Conceal the horizontal scrollbar when the navigation menu is minimized

Explaining this concept may be a bit challenging, so I have included a jsfiddle demo. The issue at hand involves a bootstrap nav menu that shifts to icons when not active and expands to include words when focused. When the menu is expanded, there are no sc ...

jquerycsstwitter-bootstrap

Tips on transforming button-controlled tab pages in Bootstrap 2 to Bootstrap 3

I am currently in the process of upgrading my website from Bootstrap 2 to Bootstrap 3, and I have encountered an issue with a specific control that consists of multiple sets of tab pages controlled by toggle buttons. Here is an example of the functional c ...

htmlcsstwitter-bootstraptabsupgrade

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

htmlcssflexbox

Error in linking PHP code to display stored tweets using HTML code

![enter image description here][1]![image of output of twitter_display.php][2] //htmlsearch.html file <!doctype html> <html> <head> <title>Twitter</title> <meta charset="utf-8"> <script> window.onload = function ...

javascriptphpjqueryhtmltwitter

Vue.js does not support the usage of external JSON files directly within HTML documents

I'm encountering issues fetching data from an external JSON file for a specific variable. I suspect that the problem lies in using Vue.js within the HTML, as it seems to be having trouble interpreting my code correctly.:joy: jsfiddle Additionally, I ...

javascripthtmlcssjsonvue.js

Hide the menu when a menu link is selected

After conducting extensive research, I have come across several scripts that can achieve what I am trying to do. However, I am unsure of how to implement them with my particular WordPress theme. Therefore, I am seeking assistance here: The theme I am usin ...

javascriptjqueryhtmlwordpress

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

cssangularbootstrap-4angular-materialmaterial-design

Looking for assistance in streamlining my jQuery code for bootstrap tab pane. Any takers?

Having trouble setting a specific tab as active when navigating from different links. I have found a solution, but it involves writing code for each individual tab. Can someone offer assistance in simplifying the code? <table class="nav nav-tabs"> ...

jqueryhtmlcsstwitter-bootstrap

Tips for creating a horizontal bar with CSS using the float property

Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...

htmlcss

Connecting your HTML file to a CSS stylesheet

I'm struggling to connect my "index.html" file with my "stylesheet.css" file. I've tried copying the code from resources like CodeAcademy and w3schools, but nothing seems to be working. I'm currently using Notepad++ as my text editor - could ...

htmlcss

Is it possible for an SVG to derive its dimensions from the containing element?

I am currently in the process of transitioning a Vue/Vuetify application from using web fonts for Material Design Icons to utilizing SVG icons instead. With the web font, an example of a heading that includes an icon looks like this: <template> &l ...

csssvgvuetify.js

The bootstrap modal display issue: black background visible

In my HTML file, there are two modal dialogs that seem to be causing an issue. Interestingly, whichever modal dialog is placed first in the sequence of the HTML code displays properly when the button is clicked (and vice versa). Both modal dialogs have u ...

jqueryhtmlbootstrap-4bootstrap-modal

Creating a dynamic search feature that displays results from an SQL database with a dropdown box

Is there a way to create a search bar similar to those seen on popular websites like YouTube, where the search results overlay the rest of the page without displacing any content? I've searched extensively on Google and YouTube for tutorials on databa ...

javascripthtmlcsssearchdropdown

A vertical divider within an ion-item collection

Currently, I am using Ionic and HTML to implement a vertical line within an ion-item in an ion-list. The desired outcome is to have something similar to this (the colored line after 'all-day'): I attempted the following approach: <ion-list&g ...

htmlionic-frameworksassionic2ionic3

Navigate the speech bubble tail by moving or rotating it with your mouse

For my project, I am working on creating a dynamic speech bubble that can be dragged around the corner of the bubble with the mouse. The goal is for the tip of the speech bubble to rotate automatically based on its position. Below is a snippet of my code: ...

jqueryhtml

A method for merging the values of three text fields and submitting them to a hidden text field

<label class="textRight label95 select205">Cost Center: </label> <input type="hidden" name="label_0" value="Cost Center" /> <input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" /> <input type=" ...

javascriptjqueryhtml

The HTML document is having trouble establishing a connection with socketio

I currently hold an HTML file within my local file system, presented as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of a Minimal Working File</title> ...

javascripthtmlnode.jswebsocketsocket.io

Ways to stop a ngFor loop in TypeScript

I'm currently working on a Hybrid app using Ionic-3. I have a function in my Typescript file that is being called from the Html, but it seems like the function is being executed multiple times causing my browser and application to hang. Below are the ...

htmlangulartypescriptionic3